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

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>

选项:bootstrap3(3.3.7) 和 jquery3

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

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

有什么好的方法可以解决吗？

我该如何解决？

Answer 1

根据 bootstrap 官方文档。

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

看Official documentation可能对你有帮助