CSS Bootstrap：将一些导航栏项目居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17824914/
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: center some navbar items
提问by denishaskin
I would like to have a bootstrap navbar where some nav items are left-justified, some are right justified, and some are centered in the remaining space between them.
我想要一个引导程序导航栏，其中一些导航项左对齐，一些右对齐，有些位于它们之间的剩余空间中。
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><a>Left</a></li>
</ul>
<ul class="nav nav-center">
<li><a>Center 1</a></li>
<li><a>Center 2</a></li>
</ul>
<ul class="nav pull-right">
<li><a>Right</a></li>
</ul>
</div>
</div>
This jsfiddle http://jsfiddle.net/b7whs/shows this--I'd like the Center 1 and Center 2 nav items to be together, centered in the navbar. Is this possible?
这个 jsfiddle http://jsfiddle.net/b7whs/显示了这一点——我希望 Center 1 和 Center 2 导航项目放在一起，在导航栏中居中。这可能吗？
There are a lot suggestions here on SO about how to do this; none of them have worked for me. Is this even possible?
这里有很多关于如何做到这一点的建议；他们都没有为我工作。这甚至可能吗？
In my case, what's on the left and right will always be the same size, so I think it should be feasible.
就我而言，左侧和右侧的大小将始终相同，因此我认为它应该是可行的。
回答by Serlite
You just needed a couple of styles to get the behaviour that I think you wanted. It looks like you were going the display:inline-blockroute to center the elements, so I'll just continue along that approach. To your existing styles, add/modify definitions so that these styles are included:
您只需要几种样式即可获得我认为您想要的行为。看起来您正在采用display:inline-block使元素居中的方法，因此我将继续沿用该方法。对于您现有的样式，添加/修改定义以便包含这些样式：
.nav.nav-center {
margin:0;
float:none;
}
.navbar-inner{
text-align:center;
}
With that, the two options should move to the exact center of your navigation bar. Here's a JSFiddle exampleto show you what this would look like. I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
这样，这两个选项应该移动到导航栏的确切中心。这是一个JSFiddle 示例，向您展示这会是什么样子。我希望这就是你要找的！如果没有，请告诉我，我很乐意为您提供进一步帮助。
回答by Mushi
Just found out the solution myself today.
今天刚刚自己找到了解决方案。
Just Add the CSS as:
只需将 CSS 添加为：
/* center the navbar*/
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
.center .dropdown-menu {
text-align: left;
}
and add center class to navbar like this
并像这样将中心类添加到导航栏
<div class="navbar navbar-inverse navbar-fixed-top center">
<div class="navbar-inner">
<div class="container center">
----
</div>
</div>
</div>
回答by Govan
add this code
添加此代码
<div class="col-lg-4 col-lg-offset-5 col-xs-2 col-xs-offset-4">
<ul class=" nav navbar-nav ">
<li><a href="#">products</a></li>
</ul>
</div>
<div class="col-lg-4 col-lg-offset-5 col-xs-2 col-xs-offset-4">
<ul class=" nav navbar-nav ">
<li><a href="#">products</a></li>
</ul>
</div>
回答by Hushme
use this css actually in bootstrap liand ulare float left
http://jsfiddle.net/b7whs/4/
实际上在引导程序中使用这个 cssli并且ul向左浮动
http://jsfiddle.net/b7whs/4/
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.nav.nav-center {
display: inline-block;
left: 0;
right: 0;
text-align:center;width:70%;
}
.nav.nav-center li,.nav.nav-center li a{display:inline;float:none;line-height:40px;}
