logo标签列表

Twitter Bootstrap：居中标签页

htmlcsstwitter-bootstrap
49

我的问题是如何让药片居中显示？

我尝试过添加center块，也尝试将float:left改为float:center，但仍然没有帮助。

没有'float:center'这样的东西，如果有的话，那么很多开发人员就可以节省很多时间了。如果你在谷歌上搜索，会发现有一些居中标签页的技巧，但是在Twitter-BS的情况下可能需要进行大量的自定义。 - Rich Standbrook
7个回答
84

这变得简单了许多！您只需要在容器上使用text-center类，并将display:inline-block应用于ul。只需确保在容器内的任何其他元素与导航之间有一个换行符或段落标记。

完成了！ 2个类添加，1行CSS（不要修改bootstrap css文件！）。

HTML：

<div class="col-md-12 text-center">
    <p>Copyright stuff</p>
    <ul class="nav nav-pills center-pills">
        <li><a href="#">Footer nav link</a></li>
        <li><a href="#">Footer nav link</a></li>
    </ul>
</div>

CSS：

.center-pills { display: inline-block; }


2015年更新:正如Artur Beljajev所提到的，Flexbox支持现在已经足够普及，您可能想改用它代替：

.center-pills {
    display: flex;
    justify-content: center;
}
这对我比broox的解决方案更有效。使用broox的解决方案时，药片的放置位置很奇怪（其中一个总是在下面）。感谢分享 :) - markdrake
注意，我使用的是Flexbox版本，当内容在移动显示端口时它不起作用。但原始答案是有效的。 - Terry
@Terry 感谢您指出这个问题。它是做了什么？您使用了哪种移动视图模式或设备？ - Preston Badeer
@PrestonBadeer 我只是在使用Chrome并模拟移动设备，但基本上它没有'block'显示，并且出现在前面的<div class="tab-content">右侧。也许我应该将具有上述样式的<div/>放在tab-content div内部？ - Terry
确保您使用所需的 flex 布局设置（行或列）。Flexbox 可能有些棘手！ - Preston Badeer
显示剩余2条评论
54
如果您想在可变宽度的容器中使用可变宽度的标签，我建议使用inline-block显示类型，并向标签容器添加一个类。
以下是我如何扩展Bootstrap以居中标签。
CSS:
.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } /* IE6 */
*+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */

HTML:

<div class="row">
  <div class="span12 centered-pills">
    <ul class="nav nav-pills">
      <li><a href="#">derek</a></li>
      <li><a href="#">brooks</a></li>
      <li><a href="#">is</a></li>
      <li><a href="#">super</a></li>
      <li class="active"><a href="#">awesome</a></li>
    </ul>
  </div>
</div>
在第三个和第四个选择器中添加了 ul.nav-pills，以防您像我一样在居中的 pills 元素中有其他列表。 .centered-pills ul.nav-pills li { display:inline; } .centered-pills ul.nav-pills li a { float:left; } - anztenney
25

或者使用弹性盒子布局（Flexbox）的方法：

.nav-pills {
    display: flex;
    justify-content: center;
}
如果目标浏览器可以处理它，这是最简单的解决方案。谢谢。 - Ken Prince
在我的情况下，我有相当多的<li>元素，因此我使用了这个额外的flex-wrap: wrap;。 - Gabriel Udrea
6

如果您希望药丸居中而不是左对齐，您需要更改CSS。您需要指定一个宽度并将边距更改为自动。

例如：

.tabs, .pills {
    margin: 0 auto;
    padding: 0;
    width: 400px;
}
13
没问题，但我建议不要编辑 CSS 文件。您可以创建自己的 CSS 文件来扩展 Twitter Bootstrap 的样式。 - Jamie Carruthers
为Bootstrap定义960像素的宽度可以帮助您居中一些本来无法居中的元素。定义宽度并使用偏移量。 - ATSiem
2
我会推荐使用prrstn的解决方案，而不是这个。这个解决方案修复了大小，完全忽略了在第一时间使用bootstrap的初衷。 - patrick
3

虽然@minaz的答案适用于已知宽度的列表，但我提出了另一种解决方案，即使您更改列表的内容也可以使用:

.tabs, .pills {
  text-align: center;
}

.tabs li, .pills li {
  float: none;
}

或者在SCSS中:

.tabs, .pills {
  text-align: center;
  li { float: none; }
}

这将使列表中的文本居中，并重置列表项的float属性，使它们受到text-align属性的影响。

这是语法错误的。你不能像这样嵌套一个CSS规则。 - hofnarwillie
3
你是正确的，这是用scss编写的，它允许这种嵌套。你需要将li部分拿出来，并指定.tabs li和.pills li。 - JeanMertz
0
0
一个简单的解决方案，使用Bootstrap 4 在<ul>标签下使用justify-content-center属性来居中导航栏。
示例： 

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="mt-5">
  <ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
    </li>
  </ul>
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
      <div class="card text-white bg-success mb-3 mx-2 px-2">
        <h1>Hi</h1>
      </div>
    </div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
      <div class="card text-white bg-info mb-3 mx-2 px-2">
        <h1>Hi</h1>
      </div>
    </div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
      <div class="card text-white bg-danger mb-3 mx-2 px-2">
        <h1>Ni Hao</h1>
      </div>
    </div>
  </div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接