如何将页面上的Twitter引导选项卡置于中心位置？

Question

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

这个html正确地显示了标签,但是向左拉(这是应该发生的).我试图修改CSS以使标签在页面上居中,但还没有运气.我认为有更多css经验的人会知道如何做到这一点.

作为一个注释,还有另一个关于导航丸的中心问题,我尝试过,但它不适用于普通的导航标签.

谢谢.

Answer 1

nav-tabs列表项由引导程序自动浮动到左侧,因此您必须重置它,而不是将它们显示为inline-block,并且对于中心菜单项,我们必须将text-align:center容器的属性添加到容器中,如下所示:

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;
}

演示:http://jsfiddle.net/U8HGz/2/show/ 在此处编辑:http://jsfiddle.net/U8HGz/2/

编辑:在用户提供的IE7 +中打补丁的版本@My Head在下面的评论中有所伤害.

演示:http://jsfiddle.net/U8HGz/3/show/ 在此处编辑:http://jsfiddle.net/U8HGz/3/

Answer 2

接受的答案是完美的.它可以进一步定制,以便您可以与标准的左对齐标签并排使用.

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

要使用它,请在tabs元素中添加"居中"类

<ul class="nav nav-tabs centered" >
..
</ul>

Answer 3

添加课程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>

尽管接受的答案效果很好,但我发现上面的Bootstrap更自然.