Question

我已将导航栏设为clearfix并在其右侧添加了另一个ul，现在它在Chrome上的移动浏览模式下无效？

使用移动视图时，下拉按钮不再有效，同样在某些视图端口，它会在两个列表中显示栏，使导航栏更高一些？ 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

您忘记将div添加到div respone以折叠，只需添加它并且按钮正常工作
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
删除 .navbar-inverse .navbar-nav＆gt;类中的 float：left; li>一个，它将工作
.navbar-inverse .navbar-nav > li > a { color: #ffffff; line-height: 60px; padding: 0 30px; text-decoration: none; }
关于某个视口中的两行菜单，我想你可以添加这个 @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

NAVBAR在移动视图中失去响应能力

1 个答案: