twitter-bootstrap bootstrap - 堆栈水平菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16518356/
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 - stack horizontal menu
提问by Morpheus
I have created menu with collapsable class .nav-collapsein bootstrap. When I resize window it disappears. So I've overrided .nav-collapseclass with this css:
我.nav-collapse在引导程序中创建了带有可折叠类的菜单。当我调整窗口大小时它消失了。所以我.nav-collapse用这个 css覆盖了类：
.nav-collapse, .nav-collapse.collapse {
height: auto;
overflow: visible;
}
This is not the desired way of doing it everytime. Take a look at this jsfiddleand remove above style from css. It will be easier to understand.
这不是每次都想要的做法。看看这个jsfiddle并从 css 中删除上面的样式。会更容易理解。
QUESTION:Is there a simple built in solution for stacking horizontal menu in bootstrap?
问题：是否有一个简单的内置解决方案用于在引导程序中堆叠水平菜单？
回答by Dan
Bootstrap does have built in stacking : http://twitter.github.io/bootstrap/components.html#navs
Bootstrap 确实内置了堆栈：http: //twitter.github.io/bootstrap/components.html#navs
This would be the correct layout for .nav-collapsein your situation:
.nav-collapse在您的情况下，这将是正确的布局：
<div class="top-nav">
<div class="container-fluid">
<div class="nav-collapse collapse">
<ul class="nav nav-tabs">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Then what I would do is override the default media query from bootstrap-responsive.cssin a separate bootstrap-overrides.css:
然后我要做的是从bootstrap-responsive.css一个单独的文件中覆盖默认的媒体查询bootstrap-overrides.css：
@media (max-width: 979px) {
.top-nav .nav-collapse, .top-nav .nav-collapse.collapse {
height: auto;
overflow: visible;
}
}
回答by Nobal Mohan
If you use "nav" class, during resize it will be turned into buttons. Your request can be achieved by using "nav-stacked" class.Look at this example http://twitter.github.io/bootstrap/components.html#navs-> Stackable
如果您使用“nav”类，在调整大小期间它将变成按钮。您的请求可以通过使用“nav-stacked”类来实现。看看这个例子http://twitter.github.io/bootstrap/components.html#navs-> Stackable
