如何在页面上居中 twitter 引导选项卡？答案

【问题标题】：How do I center the twitter bootstrap tabs on the page?如何在页面上居中 twitter 引导选项卡？
【发布时间】：2012-03-14 09:13:54
【问题描述】：

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

作为说明，还有一个关于居中导航丸的问题，我试过了，但它不适用于普通的导航标签。

谢谢。

【问题讨论】：

Twitter Bootstrap: Center Pills的可能重复

标签： html css twitter-bootstrap

【解决方案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/

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

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

【讨论】：

如果您添加*display: inline; *zoom: 1;，那么这也适用于IE7（不支持display: inline-block）。 jsfiddle.net/U8HGz/3
@MyHeadHurts 哦哇哦，非常感谢，自从我开始只支持 IE8+ 以来，我不介意旧版本的 IE，但是由于引导程序正式支持 IE7+，因此您的修复是合理且必需的.更新了我的答案。
如果它只影响 .nav-tabs 怎么办？
@AndersMetnik 您可以将目标类交换为您喜欢的任何导航选择器，甚至是自定义类或 id。
为什么有人会接受这个答案，因为它修改了基本的 css 规则？

【解决方案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;
}

要使用它，请将“居中”类添加到选项卡元素中

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

【讨论】：

【解决方案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 来说更自然。

【讨论】：

【解决方案4】：

简单添加

margin-left:50%;

当我设置标签时，为我工作。

例如

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

【讨论】：

不幸的是，这不尊重正确对齐所需的宽度或堆叠。

【解决方案5】：

您可以使用bootstrap grid 将您的导航标签居中。由于引导网格分为 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>

【讨论】：

【解决方案6】：

如果您使用 bs4，您可以将 justify-content-center 类添加到您的导航标签中，使其在页面上居中。如果你希望你的标签是合理的（完整的）添加 nav-justified 类到它，在这种情况下，如果你的导航中有 3 个项目，每个项目都有 33%。如果有 5 件物品，每件都有 20%。

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

【讨论】：

【解决方案7】：

‌Bootstrap 本身有一个名为 nav-justified 的类。只需像这样添加它：

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

如果您还想对齐<li> 的中心内容，请将其设为disply: inline-block。

【讨论】：

【解决方案8】：

试试这个：

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

【讨论】：