如何在页面的 Bootstrap 标签页居中？

我使用 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>

这个 html 正确地显示了选项卡，但是被拉到了左边(这是应该发生的)。我已经尝试修补 CSS 使标签位于页面的中心，但是还没有运气。我以为有更多 CSS 经验的人会知道怎么做。

顺便说一句，还有一个关于定位导航药丸的问题，我试过了，但它不仅仅适用于普通的导航标签。

谢谢。

87620 次浏览
小开
最佳答案

nav-tabs list 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:center to the container, like so:

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/

Edit: patched version that works in IE7+ provided by user @My Head Hurts down in the comments below.

Demo: http://jsfiddle.net/U8HGz/3/show/ Edit here: http://jsfiddle.net/U8HGz/3/

小开

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%;">
小开

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>
小开

You can just use bootstrap grid to 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:

<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.

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>
小开

Adding the class nav-justified works for me. This not only center aligns the tabs but it also spreads them nicely at the top.

<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.

小开

if you use bs4 simply you can add justify-content-center class to your nav-tabs to center it on page. if you want your tabs to be justified (full-with) add nav-justified class 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.

another way is simply to add text-center if you are use bs3 .

小开

Try This:

<ul class="nav nav-tabs justify-content-center">
小开

‌Bootstrap itself has a class for this regard named nav-justified. Simply add it like this:

<ul class="nav nav-tabs nav-justified">

If you want to align center content of <li> as well, make its disply: inline-block.


提交答案