twitter-bootstrap 引导程序导航栏右侧的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26043002/
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
Icons on the right side of the bootstrap navbar
提问by Enauofas
While doing some experimentation with twitter's bootstrap, I am trying to make a navbar with the Brand on the left side, the collapsing menu next to it, and finally a not-expanding set of icons on the right side.
在对 twitter 的引导程序进行一些实验时，我试图制作一个导航栏，左侧是品牌，旁边是折叠菜单，最后是右侧一组未展开的图标。
Here's a diddly'fiddle:
这是一个 diddly'fiddle：
And the problematic part :
和有问题的部分：
<!-- Non-collapsing right-side icons -->
<div class="navbar-header navbar-right pull-right">
<ul class="nav pull-right">
<li class="pull-right"><a href="#">
<img style="max-width:32; vertical-align:middle;" src="img/icon1.png">
</a></li>
<li class="pull-right"><a href="#">
<img style="max-width:32; vertical-align:middle;" src="img/icon2.png">
</a></li>
</ul>
</div> <!--/.navbar-right -->
As you can see in the fiddle, when the menu is collapsed, it's ok. But when the windows is large enough for the menu to expand, the icons are moved to the left (between the brand and the menu).
正如您在小提琴中看到的那样，当菜单折叠时，就可以了。但是当窗口大到足以让菜单展开时，图标会向左移动（在品牌和菜单之间）。
I also tried to put the non collapsing icons outside the navbar-header : in this case the expanded navbar is ok, but the collapsed version become wrong (the icons are in a different row).
我还尝试将非折叠图标放在 navbar-header 之外：在这种情况下，展开的导航栏没问题，但折叠的版本出错了（图标在不同的行中）。
Thank you in advance for your help.
预先感谢您的帮助。
回答by Christina
You need to structure the html differently, use classes that are meant to be used on the navbar (pull-right and pull-left are not to be used in the navbar) and write custom css.
您需要以不同的方式构建 html，使用旨在在导航栏上使用的类（在导航栏中不使用拉右和左拉）并编写自定义 css。
DEMO: http://jsbin.com/humoye/1/
演示：http: //jsbin.com/humoye/1/
Code: http://jsbin.com/humoye/1/edit
代码：http: //jsbin.com/humoye/1/edit
Try not to use inline-styles, and do be sure to use correct syntax, use fonts instead of graphics if possible because raster images on retina devices it will look blurry unless you load double the size and size it down in the css (or several other ways).
尽量不要使用内联样式，并确保使用正确的语法，如果可能，使用字体而不是图形，因为视网膜设备上的光栅图像看起来会很模糊，除非你在 css 中加载两倍大小并缩小它（或几个其他方法）。
CSS
CSS
/* icon */ .custom-navbar .fa {font-size:25px}
@media (max-width:767px) {
.custom-navbar .navbar-right {
float: right;
padding-right: 15px;
}
.custom-navbar .nav.navbar-nav.navbar-right li {
float: right;
}
.custom-navbar .nav.navbar-nav.navbar-right li > a {
padding:8px 5px;
}
.custom-navbar .navbar-toggle {
float: left
}
.custom-navbar .navbar-header {
float: left;
width: auto!important;
}
.custom-navbar .navbar-collapse {
clear: both;
float: none;
}
}
HTML
HTML
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="#" title="Help">
Help ?
</a>
</div>
<!-- Non-collapsing right-side icons -->
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="fa fa-cog"></a>
</li>
<li>
<a href="#" class="fa fa-home"></a>
</li>
</ul>
<!-- the collapsing menu -->
<div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</nav>
回答by Rajesh
Per my understanding, Menudiv should be inside Headerdiv.
根据我的理解，Menudiv 应该在Headerdiv 内。
Also Headerdiv should also have 100% width to retail position on any screen size.
此外，标题div 也应该有 100% 的宽度到任何屏幕尺寸的零售位置。
