一尘不染

如何在页面上将twitter bootstrap选项卡居中?

css

我正在使用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经验的人会知道该怎么做。

值得注意的是,还有一个关于定心导航药丸的问题,我尝试过,但它并不仅仅适用于简单的导航标签。

谢谢。


阅读 500

收藏
2020-05-16

共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;
}
2020-05-16