html - Bootstrap - 我的移动切换按钮出现在所有视口(viewport)中？

Question

我一直在观看有关创建响应式导航栏的教程，而我正在尝试创建的一件事是响应式菜单按钮。我已经创建了按钮，您可以在此处看到:

http://jsfiddle.net/nickmadd/LvhCh/4/

HTML

<nav class="navbar navbar-default affix-top nav-links" data-spy="affix" data-offset-top="100" role="navigation">
<div class="container">
    <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
    </button>
    <div class="navbar-header"> <a class="navbar-brand" href="/"><img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav navbar-brand" /></a> 
    </div>
    <div class="nav-collapse navbar-responsive-collapse" data-toggle="collapse" data-target=".navbar-nav">
        <ul class="nav navbar-nav">
            <li><a href="#">Used Cars</a>

            </li>
            <li><a href="#">Get Finance</a>

            </li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About Driven<strong class="caret"></strong></a>

                <ul class="dropdown-menu">
                    <li> <a href "#">The Team</a>

                    </li>
                    <li> <a href "#">Our Partners</a>

                    </li>
                </ul>
                <!--Drop Down End-->
            </li>
            <li><a href="#">How To Find Us</a>

            </li>
            <li><a href="#">Contact Us</a>

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

CSS

.navbar-toggle {
display: block;
}
.logo-nav {
height: 2.3em;
width: auto;
}
.brand {
font-size: 2em;
margin: 20px 0 25px;
}
.navbar-brand {
opacity: 0;
color: #ff0066;
-webkit-transition:opacity 0.3s ease-in;
-moz-transition:opacity 0.3s ease-in;
-o-transition:opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
margin-left: 0px;
}
.navbar {
border-radius: 0px;
border-left: none;
border-right: none;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar- default .navbar-nav>.open>a:focus {
color: #fff;
background-color: #DD3B4D;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #fff;
}
.dropdown-menu {
color: #fff;
background-color: #DD3B4D;
}
.dropdown-menu>li>a {
color: #fff;
}
nav.affix {
top: 0;
width: 100%;
z-index: 1000;
}
nav.affix .navbar-brand {
opacity: 1;
height: 2.3em;
width: auto;
}
.navbar-header {
width: 0px;
-webkit-transition:width .4s ease-in-out;
-moz-transition:width .4s ease-in-out;
-o-transition:width .4s ease-in-out;
transition:width .4s ease-in-out;
margin: 0 1em 0 1em
}
nav.affix .navbar-header {
width: 8em;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
margin: 0 1em 0 0;
}
.nav-links {
font: 600 15px/1.5'Arimo';
}
.navbar-nav > li:last-child {
border-right: 1px solid #475d88;
}
ul.nav a:hover {
color: #fff !important;
background-color: #DD3B4D !important;
-webkit-transition: background-color 0.6s ease;
-moz-transition: background-color 0.6s ease;
-o-transition: background-color 0.6s ease;
transition: background-color 0.6s ease;
}
nav.affix .navbar-brand {
display: inline-block;
}

问题是，当它在浏览器中打开时，即使在大视角下它仍然存在。当它达到移动尺寸时，我需要它出现。我可以使用媒体查询来执行此操作，但我确定 bootstrap 可以为您执行此操作？

我错过了什么吗？

Answer 1

这是因为你用自己的 css 覆盖了 Bootstrap css，在你的 css 的最顶部你有:

.navbar-toggle {
    display: block;
}

告诉“.navbar-toggle”总是显示。删除它，它将正确显示/隐藏。还有这些docs如果您遇到更多麻烦，可能会有用。

更新

Updated fiddle使用正确的语法。主要问题是您使用的是 .nav-collapse 而不是 .navbar-collapse。