Html 如何在页面上居中 twitter bootstrap 选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9421966/
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
How do I center the twitter bootstrap tabs on the page?
提问by mofeeta
I'm using twitter bootstrap to create togglable tabs. Here is the css I'm using:
我正在使用 twitter bootstrap 创建可切换的选项卡。这是我正在使用的 css：
<div class="container">
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
This html displays the tabs correctly, but pulled to the left (which is what is supposed to happen). I've tried tinkering with the CSS to get the tabs to center on the page, but no luck yet. I thought someone with more css experience would know how to do this.
此 html 正确显示选项卡，但向左拉（这是应该发生的）。我尝试修改 CSS 以使选项卡位于页面中心，但还没有运气。我认为有更多 css 经验的人会知道如何做到这一点。
As a note, there is another question about centering nav pills, which I tried, but it didn't work with just plain nav tabs.
请注意，还有一个关于居中导航药丸的问题，我尝试过，但它不适用于普通的导航标签。
Thanks.
谢谢。
回答by Andres Ilich
nav-tabslist items are automatically floated to the left by the bootstrap so you have to reset that and instead display them as inline-block, and to center menu items we have to add the attribute of text-align:centerto the container, like so:
nav-tabs列表项会被引导程序自动向左浮动，因此您必须重置它并将它们显示为inline-block，并且要居中菜单项，我们必须将 的属性添加text-align:center到容器中，如下所示：
CSS
CSS
.nav-tabs > li, .nav-pills > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
}
.nav-tabs, .nav-pills {
text-align:center;
}
Demo: http://jsfiddle.net/U8HGz/2/show/Edit here: http://jsfiddle.net/U8HGz/2/
演示：http: //jsfiddle.net/U8HGz/2/show/在这里编辑：http: //jsfiddle.net/U8HGz/2/
Edit: patched version that works in IE7+ provided by user @My Head Hurts down in the comments below.
编辑：用户@My Head 提供的适用于 IE7+ 的修补版本在下面的评论中受到伤害。
Demo: http://jsfiddle.net/U8HGz/3/show/Edit here: http://jsfiddle.net/U8HGz/3/
演示：http: //jsfiddle.net/U8HGz/3/show/在这里编辑：http: //jsfiddle.net/U8HGz/3/
回答by Cagatay Kalan
Accepted answer is perfect. It can be further customized so that you can use it side by side with the standard left aligned tabs.
接受的答案是完美的。它可以进一步自定义，以便您可以将它与标准的左对齐选项卡并排使用。
.nav-tabs.centered > li, .nav-pills.centered > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
}
.nav-tabs.centered, .nav-pills.centered {
text-align:center;
}
To use it, add "centered" class to your tabs element
要使用它，请将“居中”类添加到您的标签元素
<ul class="nav nav-tabs centered" >
..
</ul>
回答by Vinayak Bhat
Adding the class nav-justifiedworks for me. This not only center aligns the tabs but it also spreads them nicely at the top.
添加课程nav-justified对我有用。这不仅可以使标签居中对齐，而且还可以在顶部很好地展开它们。
<ul class="nav nav-tabs nav-justified">
<li><a href="#Page1">Page1</a></li>
<li><a href="#Page2">Page2</a></li>
<li><a href="#Page3">Page3</a></li>
<li><a href="#Page4">Page4</a></li>
</ul>
Even though the accepted answer works well, I found the above more natural to Bootstrap.
尽管接受的答案效果很好，但我发现上述内容对 Bootstrap 来说更自然。
回答by Balsa Bojic
You can just use bootstrap gridto center your nav-tabs. Since bootstrap grid is divided on 12 equals columns, you can easily use 4 columns for your navigation with 4 columns offset:
你可以只使用引导网格来居中你的导航标签。由于引导网格被划分为 12 个相等的列，因此您可以轻松地使用 4 列进行导航，并使用 4 列偏移量：
<div class="col-sm-4 col-sm-offset-4">.
<div class="col-sm-4 col-sm-offset-4">.
Therefore your are getting your navigation in the middle of the page (also responsive solution) with 4 columns free on the left and the right side.
因此，您的导航位于页面中间（也是响应式解决方案），左侧和右侧有 4 列空闲。
I found grid really useful for making responsive web pages. Good luck!
我发现网格对于制作响应式网页非常有用。祝你好运！
<div class="row-fluid">
<div class="col-sm-12">
<div class="col-sm-4 col-sm-offset-4">
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
</div>
</div>
回答by rahulm
Simply adding
简单地添加
margin-left:50%;
when I set up my tabs, worked for me.
当我设置标签时，为我工作。
For e.g.
例如
<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">
回答by Ali Qorbani
if you use bs4simply you can add justify-content-centerclass to your nav-tabs to center it on page. if you want your tabs to be justified (full-with) add nav-justifiedclass to it, in this case if you have 3 items in your nav each of them has 33% with. if 5 items is there each one have 20% with.
如果您只使用bs4，您可以将justify-content-center类添加到您的导航选项卡中以使其在页面上居中。如果您希望您的选项卡合理（完整）添加nav-justified类，在这种情况下，如果您的导航中有 3 个项目，每个项目都有 33%。如果有 5 件物品，每件物品都有 20%。
another way is simply to add text-centerif you are use bs3.
另一种方法是简单地添加，text-center如果您使用bs3。
回答by Farab Alipanah
?Bootstrap itself has a class for this regard named nav-justified. Simply add it like this:
?Bootstrap 本身有一个名为nav-justified. 只需像这样添加它：
<ul class="nav nav-tabs nav-justified">
If you want to align center content of <li>as well, make its disply: inline-block.
如果您也想对齐中心内容，请将<li>其disply: inline-block.
回答by Rafiqul Islam
Try This:
尝试这个：
<ul class="nav nav-tabs justify-content-center">
