twitter-bootstrap Bootstrap 3 导航栏不会在移动浏览器上折叠，但会在尺寸过小的桌面窗口中折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20020603/
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 Navbar won't collapse on mobile browsers but will in undersized desktop window
提问by Jake Dombrower
My Rails 4 site with the latest version of bootstrap will not collapse in mobile however if I open the site on desktop and shrink the window, it will collapse. Here is the code for my navbar:
我的带有最新版本引导程序的 Rails 4 站点不会在移动设备中崩溃，但是如果我在桌面上打开站点并缩小窗口，它会崩溃。这是我的导航栏的代码：
<div class = "navbar navbar-inverse navbar-static-top">
<div class = "container">
<a href = "/" class = "navbar-brand" style="color: white;">Earn And Learn</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li id="nav_ach"><a href = "/about/achievements" style="color: white;">Achievements</a></li>
<li id="nav_faq"><a href = "/about/faq" style="color: white;">FAQ</a></li>
<li id="nav_test"><a href = "/about/testimonials" style="color: white;">Testimonials</a></li>
<li id="nav_news"><a href = "/about/news" style="color: white;">In the News</a></li>
<li id="nav_steal"><a href = "/steal/index" style=" color: white;">Steal This Idea!</a></li>
<li><a href = "#" data-toggle="modal" data-target="#myModal" style="color: white;">Contact Us</a></li>
</ul>
</div>
</div>
</div>
回答by Harry Moreno
Dug through the github issues and it turns out we're missing this
挖掘了 github 问题，结果我们错过了这个
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://getbootstrap.com/css/#overview-mobile
http://getbootstrap.com/css/#overview-mobile
回答by user3128788
there is missing the id of collapse
缺少崩溃的 id
it must be
一定是
<div class = "navbar navbar-inverse navbar-static-top">
<div class = "container">
<a href = "/" class = "navbar-brand" style="color: white;">
Earn And Learn
</a>
<button class="navbar-toggle" data-toggle="collapse"
data-target= ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse" id="navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li id="nav_ach"><a href="/about/achievements"
style="color: white;">Achievements</a></li>
<li id="nav_faq"><a href="/about/faq"
style="color: white;">FAQ</a></li>
<li id="nav_test"><a href = "/about/testimonials"
style="color: white;">Testimonials</a></li>
<li id="nav_news"><a href = "/about/news" style="color: white;">
In the News</a></li>
<li id="nav_steal"><a href = "/steal/index"
style="color: white;">Steal This Idea!</a></li>
<li><a href = "#" data-toggle="modal" data-target="#myModal"
style="color: white;">Contact Us</a></li>
</ul>
</div>
</div>
</div>
回答by Tekkzz
This isnt standard bootstrap3. Look at the examples page to learn the syteax of bootstrap. At bootstrap3 there are other important classes to make it collapse. Look at the Examples or at my pageto learn the basic code.
这不是标准的 bootstrap3。查看示例页面以了解 bootstrap 的语法。在 bootstrap3 中，还有其他重要的类可以使其崩溃。查看示例或我的页面以了解基本代码。
回答by Raj
You can use meta tag for providing device screen width
您可以使用元标记来提供设备屏幕宽度
<meta name="viewport" content="width=device-width">
