CSS Twitter Bootstrap 2.0 中的中心导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10128812/
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
Center Navbar in Twitter Bootstrap 2.0
提问by opengrid
Suppose we have the following markup for navigation bar using Twitter Bootstrap 2.0.
假设我们有以下使用 Twitter Bootstrap 2.0 的导航栏标记。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner pull-center">
<ul class="nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
What is the best way to center .navinside navbar-inner?
什么是.nav内在中心的最佳方式navbar-inner？
I only came up with adding my own CSS styles:
我只是想出了添加我自己的 CSS 样式：
@media (min-width: 980px) {
.pull-center {
text-align: center;
}
.pull-center > .nav {
float:none;
display:inline-block;
*display: inline; *zoom: 1;
height: 32px;
}
}
回答by James Lawruk
Override the width of the container within the navbar from autoto 960px.
从auto到覆盖导航栏中容器的宽度960px。
.navbar-inner .container {width:960px;}
回答by Tim Baas
To align it in the center with a dynamic width, I used the following:
要将其与动态宽度在中心对齐，我使用了以下内容：
HTML:
HTML：
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
....
</ul>
</div>
</div>
CSS:
CSS：
.navbar .navbar-inner {
text-align: center;
}
.navbar .navbar-inner .nav {
float: none;
display:inline-block;
}
Didn't test it, but I guess only display:inline-block;could be a problem, which is supported in all browsers except for IE7 and lower..
没有测试它，但我想display:inline-block;可能只是一个问题，除 IE7 及更低版本外，所有浏览器都支持它。
回答by czlatea
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
回答by s_t_e_v_e
Just using the container class as per http://twitter.github.com/bootstrap/components.html#navbaris centering my nav; however, it is fixed width and the formatting is off (the height of the nav bar is increased and its very possible something I'm doing wrong).
只需按照http://twitter.github.com/bootstrap/components.html#navbar使用容器类就可以使我的导航居中；但是，它是固定宽度并且格式已关闭（导航栏的高度增加了，这很可能是我做错了）。
It would be nice to have the nav centered in a fluid, percentage-based width, with a minimum width, based on some minimum supported device screen size, and nowrap. (I'm a newbie wrt the responsive media queries and perhaps that is the better alternative to percentage based.)
最好让导航以流畅的、基于百分比的宽度为中心，具有最小宽度，基于一些支持的最小设备屏幕尺寸和 nowrap。（我是响应式媒体查询的新手，也许这是基于百分比的更好的替代方案。）
Still investigating the minimum width and nowrap, but another alternative to the bootstrap container class fixed width is to add a child of the navbar-inner. I would like to know if there is a built-in bootstrap solution such as the row-fluid and spanN classes, but I haven't been able to get that formatted correctly within the nav either.
仍在研究最小宽度和 nowrap，但引导容器类固定宽度的另一种替代方法是添加导航栏内部的子项。我想知道是否有内置的引导程序解决方案，例如 row-fluid 和 spanN 类，但我也无法在导航中正确格式化。
<div style="margin-left: 15%; margin-right: 15%;">
回答by Emiliano Poggi
I have found this useful and clean:
我发现这很有用且干净：
<div class="navbar navbar-fixed-top">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
where, css is:
其中，CSS 是：
.container {left:auto;right:auto}
This will center the div on the base of the width of your current navbar.
这将使 div 以当前导航栏的宽度为中心。
Responsiveness is managed apart.
响应是分开管理的。
