html - NAVBAR 在移动 View 中失去响应能力

Question

我已将我的导航栏设为 clearfix 并在其右侧添加了另一个 ul，现在它在 Chrome 上的移动 View 模式下不起作用？

当使用移动 View 时，下拉按钮不再起作用，而且在某些 View 端口，它在两个列表中显示栏，使导航栏更高？HTML

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Logo</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">Tyres</a>
                </li>
                <li>
                    <a href="#">Mags</a>
                </li>
                <li>
                <a href="#">Gallery</a>
                </li>
                <li>
                <a href="#">Blog</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">Locate a Store</a>
                </li>
                <li>
                    <a href="#">Cart</a>
                </li>
                <li>
                    <a href="#">Search</a>
                </li>
                <li>
                    <a href="#">Login</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

下面的 CSS 代码

.navbar {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    min-height: 65px;
    position: fixed;
}

.navbar-inverse .navbar-brand {
    color: #ffffff;
}

.navbar-inverse .navbar-nav>li>a {
    color: #ffffff;
    float: left;
    line-height: 60px;
    padding: 0 30px;
    text-decoration: none;
}

/* Clearfix the Navbar */
.clearfix:before, .clearfix:after,
.navbar:before, .navbar:after {
    content: " "; display: table;
}
.clearfix:after,
.navbar:after {
    clear: both;
}

/* Navbar styles */

.navbar-inverse .navbar-nav>li>a:hover {
    background-color: #2b2b2b;
    color: #ffffff;
}

Answer 1

1. 您忘记将 id 添加到响应折叠的 div，只需添加它，按钮就可以正常工作
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   
2. 在 .navbar-inverse .navbar-nav > li > a 类中删除 float: left; 它将起作用
   .navbar-inverse .navbar-nav > li > a {
color: #ffffff;
line-height: 60px;
padding: 0 30px;
text-decoration: none;
}
3. 关于某些视口(viewport)中的两行菜单，我想你可以添加这个
   @media (min-width: 768px) and (max-width: 1000px) {
.container {width: auto}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
margin: 0 -15px !important;
overflow-x: hidden !important;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
.navbar-nav > li, .navbar-nav {
float: none !important;
}
.navbar-collapse.in {
overflow-y: visible !important;
overflow-x: hidden !important;
}
}

Demo