Html Twitter bootstrap 3 导航栏导航栏-右侧导航栏折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18610249/
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
Twitter bootstrap 3 navbar navbar-right outside navbar-collapse
提问by heralight
In Twitter bootstrap 2.3.2 I can have something like: http://jsfiddle.net/aQwUZ/3/
在 Twitter 引导程序 2.3.2 我可以有类似的东西：http: //jsfiddle.net/aQwUZ/3/
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">BRAND</a>
<ul class="nav pull-right">
<li>
<a href="#">Fixed Link</a>
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#">L1</a></li>
<li><a href=#">L2</a></li>
</ul>
</div>
</div>
</div>
</div>
A twitter bootstrap navbar, where in mobile responsive view, "Fixed Link" stay visible in header.
推特引导导航栏，在移动响应视图中，“固定链接”在标题中保持可见。
Now, in bootstrap 3, after upgrade my code, I can only have: http://jsfiddle.net/EC3Ly/4/
现在，在引导程序 3 中，升级我的代码后，我只能拥有：http: //jsfiddle.net/EC3Ly/4/
<nav class="navbar navbar-inverse navbar-fixed-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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BRAND</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Fixed Link</a>
</li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">L1</a></li>
<li><a href=#">L2</a></li>
</ul>
</div>
</div>
</nav>
in mobile responsive view, I get 2 lines... I tried to wrap in a "navbar-header" node http://jsfiddle.net/EC3Ly/5/or in the first "navbar-header" without success.
在移动响应视图中，我得到 2 行...我试图在“navbar-header”节点http://jsfiddle.net/EC3Ly/5/或第一个“navbar-header”中包装，但没有成功。
What did I miss?
我错过了什么？
Thanks,
谢谢，
Alexandre
亚历山大
回答by Zim
I faced the same problem with BS3, and the only way I found to resolve it was to use a combination of pull-leftand pull-right
我在使用 BS3 时遇到了同样的问题，我发现解决它的唯一方法是使用pull-left和pull-right
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">BRAND</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li>
<a href="#">Fixed Link</a>
</li>
</ul>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">L1</a></li>
<li><a href="#">L2</a></li>
</ul>
</div>
</div>
</nav>
Working demo: http://bootply.com/78856
工作演示：http: //bootply.com/78856
回答by Bass Jobsen
The two lines in the mobile navbar are caused by the clearfix of the navbar-header:
移动导航栏中的两行是由导航栏标题的 clearfix 引起的：
.navbar-header {
.clearfix();
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
You could use media queries and css to undo this clearfix (and add a new before the collapsed dropdown)
您可以使用媒体查询和 css 来撤消此清除修复（并在折叠下拉列表之前添加一个新的）
.navbar-right {float: right !important;}
@media(max-width:767px)
{
.navbar-right {margin-right:20px;}
.navbar-header:after
{
clear: none;
}
.navbar-nav.navbar-right > li { float: left; }
.navbar-collapse:before {clear:both;}
.navbar-collapse {overflow-y: hidden;}
.navbar-collapse.in {overflow-y: visible;}
.navbar{border-color: #101010; border-width: 0 0 1px;}
.navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}
}
demo: http://bootply.com/82366
The media queries also add a float right for the navbar-right on smaller screens. To take this code in production, you maybe will fix the borders and possible the navbar css transisions too.
媒体查询还在较小的屏幕上为导航栏右侧添加了一个浮动右侧。要在生产中使用此代码，您可能还要修复边框和导航栏 css 转换。
回答by RemusT
The problem is with the point at which the navbarcollapses. By default, Bootstrap collapses at 768px. If you increase this, your navbarwill collapse sooner and your problem will disappear.
问题在于navbar崩溃的点。默认情况下，Bootstrap 在 768px 处折叠。如果你增加这个，你navbar会更快崩溃，你的问题就会消失。
The best way to do this is to customize your bootstrap file and change the @grid-float-breakpointto 850px (or whatever size you need). You can easily customize bootstrap 3 from http://getbootstrap.com/customize/?id=9720390
最好的方法是自定义您的引导程序文件并将其更改@grid-float-breakpoint为 850 像素（或您需要的任何大小）。您可以从http://getbootstrap.com/customize/?id=9720390轻松自定义引导程序 3
Hope this helps.
希望这可以帮助。
回答by Erhnam
I fixed it this way. Just right after the brand add two new lines with the same class and an additional class.
我是这样修的。就在品牌之后添加两条具有相同类别和附加类别的新产品线。
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">Home</a>
<!-- Fake branding to avoid breaking up navbar -->
<a class="navbar-brand navbar-brand-fake">Item 1</a>
<a class="navbar-brand navbar-brand-fake">Item 2</a>
And add this to your css file:
并将其添加到您的 css 文件中：
a.navbar-brand-fake {
font-size: 15px;
line-height: 21px;
margin-left: 2px !important;
}
Home, Item 1 and Item 2 remain in the navbar when resizing and the navbar won't break.
调整大小时，主页、项目 1 和项目 2 保留在导航栏中，并且导航栏不会中断。
