如何在页面上居中显示Twitter Bootstrap标签页？

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经验的人会知道如何做到这一点。

值得注意的是，关于居中导航标签还有另一个问题，我尝试了一下，但是它不能单独使用导航选项卡。

谢谢。

- mofeeta

---

可能是重复的问题：Twitter Bootstrap: Center Pills - Marijn

Answer 1

nav-tabs 列表项通过 Bootstrap 自动向左浮动，因此您需要重置它们并以 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/

---

编辑: 由用户@My Head Hurts在下面的评论中提供的适用于IE7+的修补版本。

示例: http://jsfiddle.net/U8HGz/3/show/ 编辑链接: http://jsfiddle.net/U8HGz/3/

- Andres Ilich

---

如果你添加*display: inline; *zoom: 1;，那么这段代码也能在IE7中工作（display: inline-block不被支持）。http://jsfiddle.net/U8HGz/3/ - My Head Hurts

@MyHeadHurts 哦哇，非常感谢，我开始只支持IE8+，没有注意到旧版本的IE，但你的修复方法很好，因为Bootstrap官方支持IE7+。我已经更新了我的答案。 - Andres Ilich

如果它只应该影响 .nav-tabs，怎么办？ - Anders Metnik

@AndersMetnik，您可以将目标类更改为您喜欢的任何导航选择器，甚至是自定义类或ID。 - Andres Ilich

为什么会有人接受这个答案，因为它修改了基本的CSS规则？ - Sachin Sharma

这在IE和Firefox上对我有效，但在Google Chrome上无效。有什么想法可以让Chrome显示居中的选项卡吗？ - Retro

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

要使用它，将“centered”类添加到您的选项卡元素中

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

- Cagatay Kalan

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更自然。

- Vinayak Bhat

Answer 4

仅仅添加

margin-left:50%;

当我设置我的选项卡时，对我有用。

例如。

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">

- rahulm

---

很遗憾，这并不能尊重正确对齐所需要的宽度或堆叠。 - noinput

Answer 5

您可以使用Bootstrap网格来居中您的导航选项卡。由于Bootstrap网格被分为12个相等的列，因此您可以轻松地使用4个列来制作导航，其中有4个列的偏移量：<div class="col-sm-4 col-sm-offset-4">。

因此，您可以在页面中央获得导航（也是响应式解决方案），左侧和右侧还有4个自由列。

我发现网格非常有用，可以制作响应式网页。祝好运！

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

- Balsa Bojic

Answer 6

如果您使用的是bs4，只需向您的nav-tabs添加justify-content-center类即可使其居中显示在页面上。 如果您希望选项卡被调整（全宽），请向其中添加nav-justified类，在这种情况下，如果您的导航中有3个项目，则每个项目都具有33％的宽度。 如果有5个项目，则每个项目都有20％的宽度。

另一种方法是如果您使用的是bs3，只需简单地添加text-center。

- Ali Qorbani

Answer 7

Bootstrap本身有一个与此相关的类，名为nav-justified。只需像这样添加：

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

如果您想将 <li> 元素的内容居中对齐，可以将其设置为 display: inline-block。

- Farab Alipanah

Answer 8

试试这个：

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

- Rafiqul Islam