twitter-bootstrap bootstrap navbar-static-top 菜单中断在两行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22228239/
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 navbar-static-top menu breaks on two lines
提问by Bernd Jacobi
I encountered a problem with the bootstrap navbar.
我遇到了引导程序导航栏的问题。
I Made menu using the navbar-static-top - at first it was all good. When menu was expanded and few items added, and now with the width before to collapse, it is spreading into two lines that looks awful. In CSS bootstrap'a dig deeper, but without much success. Please help, how to be here?
我使用导航栏静态顶部制作菜单 - 起初一切都很好。当菜单被展开并添加很少的项目时，现在折叠之前的宽度，它扩展成两行，看起来很糟糕。在 CSS bootstrap'a 中深入挖掘，但没有太大的成功。请帮忙，如何在这里？
Currently it looks like shown here:
目前它看起来像这里显示的：
Navbar code:
导航栏代码：
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="bright-logo-text navbar-brand" href="index.html">Clipboard Stripper</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Features<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="features.html">Features</a></li>
<li><a href="screenshots.html">Screenshots</a></li>
<li class="active"><a href="usage.html">Usage</a></li>
</ul>
</li>
<li><a href="features.html">Features</a></li>
<li><a href="screenshots.html">Screenshots</a></li>
<!--li class="active"><a href="usage.html">Usage</a></li-->
<li><a href="download.html">Download</a></li>
<li><a href="purchase.html">Purchase</a></li>
<!--li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</li-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="contact.html">Contact</a></li>
<li> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
回答by ghiscoding
I also wanted to use it through CSS without redownloading and customizing Bootstrap, Skellyanswer is working fine on Bootstrap 3but in my case Bootstrap 3.2the CSS changed a litte... Here is an updated version of all CSS required
我还想通过 CSS 使用它，而无需重新下载和自定义 Bootstrap，Skelly答案工作正常，Bootstrap 3但在我的情况下Bootstrap 3.2，CSS 改变了一点……这是所需的所有 CSS 的更新版本
@media (max-width:992px){
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
回答by Zim
You can have it collapse sooner using a CSS media query. The default breakpoint is 768px. Here we change it to 990 pixels so that it collapses before the 2-line wrapping starts..
您可以使用 CSS 媒体查询使其更快折叠。默认断点是 768px。在这里，我们将其更改为 990 像素，以便在 2 行换行开始之前折叠。
@media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
