CSS 修改 twitter bootstrap 导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10568103/
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
Modify twitter bootstrap navbar
提问by Richlewis
Ive been trying to modify the twitter bootstrap navbar, at the moment all the links are aligned to the left, when what i would really like is the have them central.
我一直在尝试修改 twitter bootstrap 导航栏，目前所有链接都向左对齐，而我真正想要的是将它们放在中央。
In a different post i read that you use this
在另一篇文章中，我读到你使用这个
.tabs, .pills {
margin: 0 auto;
padding: 0;
width: 100px;
}
But this did not work for me
但这对我不起作用
What do i need to change in the css to make this happen, i understand i put the modified css in the bootstrap and overrides.
我需要在 css 中更改什么才能实现这一点，我知道我将修改后的 css 放在引导程序中并覆盖。
Any help appreciated
任何帮助表示赞赏
this is my markup
这是我的标记
layouts/application
布局/应用
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand">Newbridges</a>
<% if user_signed_in? %>
<div class="nav-collapse">
<ul class="nav ">
<%= render "shared/navbarlogin" %>
</div>
<% else%>
<div class="nav-collapse">
<ul class="nav">
<%= render "shared/navbar" %>
</div>
<% end %>
I've also tried this
我也试过这个
.nav > li {
float: none;
display: inline-block;
*display: inline;
/* ie7 fix */
zoom: 1;
/* hasLayout ie7 trigger */
}
.nav {
text-align: center;
}
回答by Andres Ilich
You can center your nav menu by setting your menu items to display:inline-blockinstead of float:leftlike so:
您可以通过将菜单项设置为display:inline-block而不是float:left像这样来居中导航菜单：
.navbar .nav,
.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.navbar-inner {
text-align:center;
}
Though i suggest you create your own class to target your navbar menu that you wish to center, this way you won't bother the bootstrap default values and mess with other nav sections you may have in your page. You can do it like so:
虽然我建议您创建自己的类来定位您希望居中的导航栏菜单，但这样您就不会打扰引导程序默认值，也不会弄乱您页面中可能有的其他导航部分。你可以这样做：
Notice the .center class in the navbar container
注意导航栏容器中的 .center 类
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div>
And then you can target the .centerclass like so:
然后你可以.center像这样定位类：
.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;
}
Demo: http://jsfiddle.net/C7LWm/show/
演示：http: //jsfiddle.net/C7LWm/show/
Edit: Forgot to realign the submenu items to the left, this is the fix:
编辑：忘记将子菜单项重新对齐到左侧，这是修复：
CSS
CSS
.center .dropdown-menu {
text-align: left;
}
回答by Phreak Nation
I know this is an old post but I have also noticed this post a few times in my googling. I want to actually set the record straight for centering the navbar in twitter bootstrap as the current accepted method is not wrong, but not needed as twitter bootstrap supports this.
我知道这是一个旧帖子，但我在谷歌搜索中也注意到了几次这个帖子。我想直接设置记录以在 twitter bootstrap 中居中导航栏，因为当前接受的方法没有错，但不需要，因为 twitter bootstrap 支持这一点。
There is actually a better way of doing this then modifying it manually. This will cut down of code by using what is already in twitter bootstrap.
实际上有一种更好的方法可以做到这一点，然后手动修改它。这将通过使用 twitter bootstrap 中已有的内容来减少代码。
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">RIZEN</a>
<ul class="nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
</div>
</div>
Breakdown
First line is pretty simple as we are creating the navbar, setting it to a fixed position on the viewport to the top and then swapping the white to black by inverting the color theme.
细分
第一行非常简单，因为我们正在创建导航栏，将其设置到视口顶部的固定位置，然后通过反转颜色主题将白色交换为黑色。
Next we are going to assign the navbar-inner which more or less says, if at all possible, set a minimum hight and this is where the actual color stylings come from, not the line above.
接下来，我们将分配 navbar-inner，它或多或少地说，如果可能的话，设置一个最小高度，这是实际颜色样式的来源，而不是上面的行。
Here is the IMPORTANTline as we are dropping the fluid layout for the navbar and going with just a container. This sets a fixed with with margins that center aligns the inner content to the screen. This is done through having auto margins, and setting a width.
这是重要的一行，因为我们正在删除导航栏的流体布局并只使用一个容器。这设置了一个固定的边距，使内部内容与屏幕对齐。这是通过自动边距和设置宽度来完成的。
This method will do what you want as you actually save kb in header requests by not adding extra code and using the scaffolding properly with twitter bootstrap and not having extra code bloat. I have used this method in my own projects and continue to use it in my current project. The hazard with modifying TBS(twitter bootstrap) is that you lose code consistency and if in the future you want to change things you have to make a mental note of what you have changed otherwise things may not work as intended.
此方法将执行您想要的操作，因为您实际上将 kb 保存在标头请求中，方法是不添加额外代码并通过 twitter bootstrap 正确使用脚手架，并且不会有额外的代码膨胀。我已经在我自己的项目中使用了这种方法，并在我当前的项目中继续使用它。修改 TBS(twitter bootstrap) 的危险在于你会失去代码的一致性，如果将来你想改变一些东西，你必须在心里记下你所做的改变，否则事情可能无法按预期工作。
Hope this helps. Also if you want a working example just look at the homepage of twitter bootstrap as it has just that.
希望这可以帮助。此外，如果您想要一个工作示例，只需查看 twitter bootstrap 的主页，因为它就是这样。
回答by Gabriel
Ah and also, if you wish for spaces on both sides (before "Project Name" and after "Dropdown") to be symmetrical, add the following:
啊，还有，如果你希望两边的空格（在“项目名称”之前和“下拉”之后）是对称的，请添加以下内容：
.navbar .nav, .navbar .nav > ul
{
float: right
}
Also, it seems that using the following (as of Bootstrap v2.0.4) doesn't center the navbar still:
此外，似乎使用以下内容（从 Bootstrap v2.0.4 开始）仍然不会使导航栏居中：
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
<div class="container-fluid">
.
.
.
</div>
</div>
</div>
You need to change to
您需要更改为
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
<div class="container">
.
.
.
</div>
</div>
</div>
(Extracted from the sample provided by Andres llich; just that he missed out the change)
（摘自 Andres llich 提供的样本；只是他错过了更改）
Now it works for me...
现在它对我有用...
回答by terrymorse
The centering css from above works well on un-collapsed navbars only.
上面的居中 css 仅适用于未折叠的导航栏。
It's not ideal when the navbar is collapsed, though. By default, each collapsed navbar item is on its own row, like a drop down menu. But the css above tries to shove all collapsed items onto the same row, which is less than ideal.
但是，当导航栏折叠时，这并不理想。默认情况下，每个折叠的导航栏项目都在自己的行上，就像下拉菜单一样。但是上面的 css 试图将所有折叠的项目推到同一行上，这不太理想。
I used this small fix of wrapping the centering css in a media query, so it gets triggered on non-collapsed navbars only:
我使用了这个将居中 css 包装在媒体查询中的小修复，因此它仅在未折叠的导航栏上触发：
@media (min-width: 768px) {
.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;
}
}
(tested with bootstrap 3.1.1)
（使用引导程序 3.1.1 测试）
