twitter-bootstrap 导航栏不会与 Bootstrap 折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16885180/
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
Navbar not collapsing with Bootstrap
提问by user1675567
I have a website that is made with Twitter Bootstrap. On a large screen the navbar is looking nice as it should be but if you see the same navbar on a cellphone the navbar won't collapse.
我有一个使用 Twitter Bootstrap 制作的网站。在大屏幕上，导航栏看起来不错，但如果您在手机上看到相同的导航栏，则导航栏不会崩溃。
This is my code:
这是我的代码：
<div class="container">
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="/" class="">Home</a></li>
<li><a href="goud-zilver.html">Oud goud en zilver</a></li>
<li><a href="koersen.html">Offici?le koersen</a></li>
<li><a href="webshop/" target="_blank">Webwinkel</a></li>
<li><a href="diversen.html">Diversen</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
On the third class i also tried to use nav-collapse but then it is also collapsed on a large screen.
在第三堂课上，我也尝试使用 nav-collapse 但它也在大屏幕上折叠起来。
回答by Bass Jobsen
Yes follow the instructions from Betty St(include responsive css, bootstrap-collapse.js and the Transitions plugin update: (bootstrap-transition.js) and jQuery). You need to add a button / link which triggers the collapse. This tags get the attributes: data-toggle="collapse" data-target=".nav-collapse" where data-target can be any css selector. Put your nav between the tag selected under data-target, see: http://bootply.com/62921
是的，请遵循Betty St的说明（包括响应式 css、bootstrap-collapse.js 和 Transitions 插件更新：(bootstrap-transition.js) 和 jQuery）。您需要添加一个触发折叠的按钮/链接。此标签获取属性： data-toggle="collapse" data-target=".nav-collapse" 其中 data-target 可以是任何 css 选择器。将您的导航放在 data-target 下选择的标签之间，请参阅：http: //bootply.com/62921
html:
html:
<div class="container">
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="/" class="">Home</a></li>
<li><a href="goud-zilver.html">Oud goud en zilver</a></li>
<li><a href="koersen.html">Offici?le koersen</a></li>
<li><a href="webshop/" target="_blank">Webwinkel</a></li>
<li><a href="diversen.html">Diversen</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</div>
</div><!-- /.navbar -->
</div>
</div>
updateYour code is missing the Transitions plugin (bootstrap-transition.js) required by the Collapse plugin. More important you didn't include jQuery. Now it should work see: http://plnkr.co/l66QqCftGNsaG0xkBrUf
更新您的代码缺少 Collapse 插件所需的 Transitions 插件 (bootstrap-transition.js)。更重要的是你没有包含 jQuery。现在它应该可以工作了：http: //plnkr.co/l66QqCftGNsaG0xkBrUf
javascript includes:
JavaScript 包括：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>
Note: Consider to include the compiled (or minified) version of the complete javascripts:
注意：考虑包含完整 javascript 的编译（或缩小）版本：
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
You also need to change the style after collapsing:
您还需要在折叠后更改样式：
.navbar .in .nav li {
display: block;
float: none;
width:100%;
}
回答by Vishal Srinivasan
I had the similar kind of problem. I was totally confused of why my navigation bar is not collapsing in mobile phone. Atlast I found that I missed the following meta tag.
我有类似的问题。我完全不明白为什么我的导航栏在手机中没有折叠。Atlast 我发现我错过了以下元标记。
<meta name="viewport" content="width=device-width, user-scalable=false;">
<meta name="viewport" content="width=device-width, user-scalable=false;">
This will solve the problem.
这将解决问题。
回答by Betty St
you need to include the responsive css file of twitter bootstrap, and also use the bootstrap-collapse.js.
您需要包含 twitter bootstrap 的响应式 css 文件，并且还需要使用 bootstrap-collapse.js。
Note the info on http://twitter.github.io/bootstrap/components.html#navbarat 'responsive navbar':
请注意http://twitter.github.io/bootstrap/components.html#navbar在“响应式导航栏”上的信息：
Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
当心！响应式导航栏需要折叠插件和响应式 Bootstrap CSS 文件。
Quicklinks:
快速链接：
回答by Migisha
- You will need to have the compiled versionof bootstrap.js or bootstrap.min.js with collapseand transitionchecked[and therefore included] for compilation.
- Give your parent divan
id. If it already has one, take note of it. Your parent div is going to be the one whose immediate children comprise the dropdown [the links, buttons, etc.] - Add
data-toggleanddata-targetto each of the child elementsof our previously talked-about parent div.
Assuming the parent div'sisid="my_parent_div", the child elementsshould each havedata-toggle="collapse" data-target="#my_parent_div"appended inside the link attribute.
- 您将需要编译后的 bootstrap.js 或 bootstrap.min.js并检查折叠和转换[因此包括] 以进行编译。
- 给你的父 div一个
id. 如果它已经有一个，请注意它。您的父 div 将是其直接子级包含下拉列表 [链接、按钮等] 的那个 - 将
data-toggle和添加data-target到我们之前讨论过的父 div 的每个子元素。 假设父 div是，子元素应该每个都 附加在链接属性内。id="my_parent_div"data-toggle="collapse" data-target="#my_parent_div"
Here's a sample from my fixed navbar code:
这是我的固定导航栏代码中的一个示例：
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#book" data-toggle="collapse" data-target="#example-navbar-collapse">Book a Room!</a></li>
<li class="divider"></li>
<li><a href="#services" data-toggle="collapse" data-target="#example-navbar-collapse">Services</a></li>
<li><a href="#packages" data-toggle="collapse" data-target="#example-navbar-collapse">Packages</a></li>
<li><a href="#contacts" data-toggle="collapse" data-target="#example-navbar-collapse">Location</a></li>
</ul>
</div>
Hope this helps :)
希望这可以帮助 ：）
回答by dustbuster
I had the same issue, I found that i was loading jQuery twice, and I was loading jQuery in the footer, AFTER bootstrap. Everything else worked on the page except for the collapse for some reason. I went back to basics, and it solved the issue. Load jQuery, then bootstrap, and make sure there's no other random includes pages that are loading jQuery as well. This relates to bootstrap 4 nav elements.
我遇到了同样的问题，我发现我加载了两次 jQuery，并且我在页脚中加载了 jQuery，在引导之后。除了由于某种原因崩溃外，其他所有内容都在页面上工作。我回到了基础，它解决了这个问题。加载 jQuery，然后引导，并确保没有其他随机包含页面也在加载 jQuery。这与 bootstrap 4 导航元素有关。
回答by Code-Rookie
To add to dustbuster, I also had the issue and tried to load the JQuery first then the Boostrap but the issue didn't get resolved and noted another hint from the link below: -
添加到dustbuster，我也遇到了这个问题，我尝试先加载JQuery，然后加载Boostrap，但问题没有得到解决，并从下面的链接中注意到另一个提示：-
https://www.freecodecamp.org/forum/t/solved-my-bootstrap-navbar-toggle-is-not-toggling/15222/20
https://www.freecodecamp.org/forum/t/solved-my-bootstrap-navbar-toggle-is-not-toggling/15222/20
To add the Bootstrap.min.js instead of Bootstrap.min.css. Please do not remove the Bootstrap.min.css when adding the js. Once both added, the issue was resolved.
添加 Bootstrap.min.js 而不是 Bootstrap.min.css。添加js时请不要删除Bootstrap.min.css。一旦两者都添加，问题就解决了。
