twitter-bootstrap Bootstrap 3 中响应式导航栏的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18075248/
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
Problems with the responsive navbar in Bootstrap 3
提问by user2655858
I had no problem with the responsive navbar in the last version of Bootstrap, but I cannot get version 3 to work. The toggle button appears properly and everything disappears but the brand, but the button does not respond to clicks. (http://getbootstrap.com/components/#navbar-responsive) Any help would be greatly appreciated! Here is the code so far:
我对最新版本的 Bootstrap 中的响应式导航栏没有任何问题，但我无法让版本 3 工作。切换按钮正确显示，所有东西都消失了，但品牌，但按钮不响应点击。( http://getbootstrap.com/components/#navbar-responsive) 任何帮助将不胜感激！这是到目前为止的代码：
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Hello World</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<section>
<div class="navbar navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href= "#" class="navbar-brand">Brand Name</a>
<div class="nav-collapse navbar-responsive-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li class="active "><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</section>
回答by Phil Nicholas
I believe the code below will produce the effect you're looking for. Specifically, there is no "navbar-responsive-collapse" class in BS3 (see the "bootstrap.css" file). Beginning with release 3 Twitter Bootstrap is responsive by default, so many of the code flags for responsiveness are now baked into the framework and no longer need to be called explicitly.
我相信下面的代码会产生你正在寻找的效果。具体来说，BS3 中没有“ navbar-responsive-collapse”类（参见“bootstrap.css”文件）。从第 3 版开始，默认情况下 Twitter Bootstrap 是响应式的，因此许多响应式代码标志现在都已融入框架中，不再需要显式调用。
Here's a BS3 version of the right-aligned collapsible menu:
这是右对齐可折叠菜单的 BS3 版本：
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href= "#" class="navbar-brand">Brand Name</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active "><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
回答by KLEW
Change this:
.navbar-responsive-collapse
改变这个：
.navbar-responsive-collapse
to this:
.navbar-collapse
对此：
.navbar-collapse
Original poster solved his own question. Posting a more concise version here as this helped me. PhilNicholas' version did not work.
原始海报解决了他自己的问题。在这里发布一个更简洁的版本，因为这对我有帮助。PhilNicholas 的版本不起作用。
回答by user3234300
Bootstrap 3 requires jquery.
Bootstrap 3 需要 jquery。
--> Best practice to put your scripts at the end too.
--> 最好的做法是把你的脚本也放在最后。
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
回答by lost-and-found
Twitter bootstrap uses the bundled Collapsejquery plugin to toggle the navigation menu on mobile screen form factors. Your question pertains to a slightly old release of bootstrap but still remains relevant – the toggle can be triggered on an element by setting:
Twitter bootstrap 使用捆绑的Collapsejquery 插件来切换移动屏幕形式因素上的导航菜单。您的问题与引导程序的旧版本有关，但仍然相关 – 可以通过设置在元素上触发切换：
data-toggle="collapse"and
data-target="#valid_css_selector_of_target_element".
data-toggle="collapse"和
data-target="#valid_css_selector_of_target_element"。
The catch here is the latter –?as far as the functioning of Collapse plugin is concerned it doesn't matter whether you have a predefined bootstrap class .navbar-responsive-collapse, the only thing that matters here is that element exists in your html. The existence of a bootstrap class however would very likely affect how it's styled.
这里的问题是后者——就 Collapse 插件的功能而言，是否有预定义的引导类.navbar-responsive-collapse并不重要，这里唯一重要的是该元素存在于您的 html 中。然而，引导类的存在很可能会影响它的样式。
The bootstrap documentation at the time of this writing (and I believe since long) shows, via an example, the use of an id attributeto select the target element; which I find a bit better because there can be more than one elements with the same class on the same page, while Ids are unique in an html document. So, in your case:
撰写本文时的引导程序文档（我相信很久以来）通过一个示例展示了使用 id 属性来选择目标元素；我觉得这更好一些，因为在同一页面上可以有多个具有相同类的元素，而 Id 在 html 文档中是唯一的。所以，在你的情况下：
<div class="collapse navbar-collapse navbar-ex1-collapse">would look something like <div class="collapse navbar-collapse navbar-ex1-collapse" id="my_nav">and the toggle button would have an attribute data-target="#my_nav".
<div class="collapse navbar-collapse navbar-ex1-collapse">看起来像<div class="collapse navbar-collapse navbar-ex1-collapse" id="my_nav">，切换按钮会有一个属性data-target="#my_nav"。
回答by baron5
This worked for me: I changed .navbar-ex1-collapse to .navbar-collapse.
这对我有用：我将 .navbar-ex1-collapse 更改为 .navbar-collapse。
回答by Alex W
I am using Bootstrap 3.2.0. What fixed this problem for me was changing the version of jQuery I was using. Apparently, jQuery 1.7.1 is not compatible with the latest bootstrap. After switching to jQuery 2.0.2, all was well:
我正在使用 Bootstrap 3.2.0。为我解决这个问题的是更改我使用的 jQuery 版本。显然，jQuery 1.7.1 与最新的引导程序不兼容。切换到 jQuery 2.0.2 后，一切都很好：
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
回答by Azarsa
make sure link the bootstrap.csbefore bootstrap-responsive.css
确保链接bootstrap.cs之前bootstrap-responsive.css
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
