下拉菜单中的导航栏搜索框会导致其他导航栏图标崩溃

Question

        .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
            background-color: transparent !important;
        }
        .nav > li a.dropdown-toggle {
            text-align: right;
        }

        .dropdown-menu {
            min-width: 20px !important;
        }
        .nav>li{vertical-align:top}

        /* navbar-icon */
        .nav {
        //  display: flex;
            width: 100%;
        }

        .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
            background-color: transparent;
        }

        .nav > li {
            display: inline-block !important;
        }

        .nav_li_last_options {
            float: right;
        }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--navbar start-->
<nav class="navbar navbar-default navbar-fixed-top navbar_base">
    <div class="container-fluid padding_right_0">
        <ul class="nav navbar-nav navbar_ul_base" style="max-height: 50px;">
            <li><a href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment"></i></a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding: 15px; text-align: left">
                    <i class="glyphicon glyphicon-search"></i>
                </a>
                <ul class="dropdown-menu" style="width: 100%;">
                    <li>
                        <form class="navbar-form" style="width: 100%; margin: auto">
                        <div class="input-group input-group-sm">
                            <input class="form-control" placeholder="Search" id="searchbar" type="text">
                            <div class="input-group-btn">
                                <i class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
                                </i>
                            </div>
                        </div>
                        </form>
                    </li>
                </ul>
            </li>
            <li class="nav_li_last_options dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding: 15px;">
                    <i class="glyphicon glyphicon-option-horizontal"></i>
                </a>
                <ul class="dropdown-menu dropdown_menu_base">
                    <li><a href="#">JavaScript</a></li>
                </ul>
            </li>


        </ul>
    </div>
</nav>

options：bootstrap 3（3.3.7）和jquery 3

我制作了带有搜索图标的导航栏。单击搜索图标时，将打开下拉菜单中的搜索框。

但是，在浏览器的宽度<768时，当我点击搜索图标时，导航栏和其他图标会崩溃。

有没有什么好方法可以修复它？

我该如何解决？

Answer 1

根据bootstrap官方文档。

Changing the collapsed mobile navbar breakpoint

当视口比@grid-float-breakpoint窄时，导航栏会折叠到其垂直移动视图中，当视口宽度至少为@grid-float-breakpoint时，会扩展到其水平非移动视图。在Less source中调整此变量以控制导航栏折叠/展开的时间。默认值为768px（最小的“小”或“平板电脑”屏幕）。

看看Official documentation可能对你有所帮助