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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

谢谢。

回答：

nav-tabs列表项会由引导程序自动浮动到左侧，因此您必须将其重置，而是将其显示为inline-

block，对于居中菜单项，我们必须将属性添加text-align:center到容器中，如下所示：

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

以上是 如何在页面上将twitter bootstrap选项卡居中？ 的全部内容， 来源链接： utcz.com/qa/415739.html

回到顶部