twitter-bootstrap Bootstrap 3 折叠菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18039668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Collapsing Menu
提问by Clutch _
I just recently downloaded the latest version of bootstrap... I built a collapsing nav and it does what it is intended but, when you roll over the menu icon after it collapses nothing happens. In all the demos the nav pops down. Ive downloaded examples and they dont work after the menu is hidden either? Ive looked all over for a solution?Any assistance would be greatly appreciated! Im including the code written..
我最近刚刚下载了最新版本的引导程序......我构建了一个折叠导航，它可以实现预期的目的，但是，当你在菜单图标折叠后滚动菜单图标时，什么也没有发生。在所有演示中，导航都会弹出。我已经下载了示例，但在菜单隐藏后它们也不起作用？我已经四处寻找解决方案？任何帮助将不胜感激！我包括编写的代码..
CSS
CSS
/*nav styles*/
.navbar{
background:none;
}
.nav{
margin-top:77px;
margin-right:5%;
}
.navbar .brand {
max-height: 40px;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
.navbar .nav li{
padding-left: 5px;
font-weight: bold;
text-transform: uppercase;
}
.navbar .nav li a{
background-color: #00AFE7;
color: #000;
-webkit-transition:background 1s ease;
-moz-transition:background 1s ease;
-o-transition:background 1s ease;
transition:background 1s ease;
}
.navbar .nav li a:focus,
.navbar .nav li a:hover {
color: #FFF;
text-decoration: none;
background-color: #000;
-webkit-transition:background 1s ease;
-moz-transition:background 1s ease;
-o-transition:background 1s ease;
transition:background 1s ease;
}
HTML
HTML
<body>
<div class="navbar">
<div class="container">
<div class="navbar-inner">
<button type="btn btn-navbar" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="#"><img class="pull-left "src="img/logo.png" /></a>
<!--<a class="navbar-brand pull-left" href="#"><img class="pull-left "src="img/logo.png" /></a>-->
<div class="nav-collapse collapse">
<ul class="nav nav-pills pull-right ">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Bikes</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Store</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p> <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs ?</a>
</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
回答by David Taiaroa
I suspect you are mixing Bootstrap 2 and Bootstrap 3 code.
我怀疑您正在混合 Bootstrap 2 和 Bootstrap 3 代码。
Check this out:
Live view
Edit view
I've taken your exact HTML and CSS, but used Bootstrap 2 CSS and JS
我已经采用了您的确切 HTML 和 CSS，但使用了 Bootstrap 2 CSS 和 JS
If you do indeed want to use Bootstrap 3, double check you have the correct CSS and JS files, and you will see that the HTML for the navbar has changed, you can grab a sample navbar from
如果您确实想使用 Bootstrap 3，请仔细检查您是否拥有正确的 CSS 和 JS 文件，您将看到导航栏的 HTML 已更改，您可以从中获取示例导航栏
http://getbootstrap.com/components/#navbar
http://getbootstrap.com/components/#navbar
http://getbootstrap.com/components/#navbar
Good luck
祝你好运
