如何在中心对齐引导标签？

Question

我有这样的标签:

<ul class="nav nav-tabs ">
    <li class="active">
        <a href="#tab_default_1" data-toggle="tab">
            Tab 1
        </a>
    </li>
    <li>
        <a href="#tab_default_2" data-toggle="tab">
            Tab 2
        </a>
    </li>
    <li>
        <a href="#tab_default_3" data-toggle="tab">
            Tab 3
        </a>
    </li>
</ul>

但是不要让它们在左边,我希望它们在中心.我试过text-align:center;甚至设置margin-left:0,margin-right:0但都没有工作.如果不重写整个代码,最简单的方法是什么？

这是一个jsFiddle:

http://jsfiddle.net/j751b1mb/

Answer 1

.nav-tabs > li {
    float:none;
    display:inline-block;
    zoom:1;
}

.nav-tabs {
    text-align:center;
}

http://jsfiddle.net/j751b1mb/4/

Answer 2

你添加了很多自定义CSS,但最简单的Bootstrap方式是使用nav-tabs和nav-justified..

http://www.codeply.com/go/upP3lh2gxS

<ul class="nav nav-tabs nav-justified">
     <li>..</li>
     ..

Answer 3

在Bootstrap 4中:

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

Answer 4

这是一个更新的小提琴：http : //jsfiddle.net/j751b1mb/5/

关键是在导航选项卡上设置 display: flex 并将它们对齐在页面的中心。

.nav-tabs {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

您可以通过修改页边距对选项卡的特定位置进行更细粒度的控制 .tabbable-line > .nav-tabs > li

.tabbable-line > .nav-tabs > li {
   margin: auto 2px;
}

例如，上面的代码将它们均匀地分布在整条线上。

希望有帮助。