在Bootstrap中居中显示Pills

Question

在Bootstrap中居中显示Pills

3

我刚开始使用Bootstrap，遵循这个问题的步骤，但似乎无法将我的选项卡居中显示？

</head> <body>
    <div class="container">
      <ul class="nav nav-pills">
        <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>

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

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

我有一个名为style.css的文件，其中包含CSS。我通过如下方式进行导入：

<link href="style.css" rel="stylesheet" type = "text/css">

这两个文件都在bootstrap文件夹中，所以不是很确定发生了什么事情。

- zhuyxn

http://jsbin.com/axizic/1 对我来说看起来不错。你确定没有其他样式与它冲突吗？ - sachleen

哦，糟糕了，它与<link rel="stylesheet" href="css/bootstrap.css">冲突了，那个和<link href="css/bootstrap.css" rel="stylesheet" type = "text/css">有什么区别？第一个被注释掉后问题就解决了，第二个则不受影响。 - zhuyxn

两种方式都可以：

包含样式的顺序很重要。
样式的包含顺序是有影响的。

- sachleen

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

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Dyer · Accepted Answer

您需要覆盖Bootstrap定义的.nav-pills CSS类（就像您已经在做的那样）。您应该更新边距并指定元素的宽度。

.nav-pills {
    margin: 0 auto;
    padding: 0;
    width: 400px;
}