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

发布于02月24日

我正在使用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正确地显示了选项卡，但被拉到了左边(这是应该发生的情况).我try 过修改CSS以使选项卡位于页面的中心，但还没有成功.我认为有更多CSS经验的人会知道如何做到这一点.

值得注意的是，还有一个关于导航药片居中的问题，我试过了，但它不适用于普通导航标签.

谢谢你.

推荐答案

nav-tabs个列表项由 bootstrap 自动浮动到左侧，因此您必须重置它，并将其显示为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/

编辑:用户@My Head Heats down在下面的 comments 中提供了在IE7+中工作的补丁版本.

演示:http://jsfiddle.net/U8HGz/3/show/ 编辑地址:http://jsfiddle.net/U8HGz/3/

Css相关问答推荐

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

推荐答案

Css相关问答推荐

如果父元素跨越所有网格列，子元素是否可以与网格一起工作？

如何将CSS Paint API与Reaction一起使用

try 在Jekyll中使用多个SCSS文件时出错

Astro网站在使用Astro Build构建后无法正常工作

flexbox换行时自动设置高度的原理是什么

如何使shiny 的showNotification可滚动？

如何使我的标语(h1元素)不居中对齐？

做一个像CodeSandbox的console那样的可拖拽的split panel

flex-start 和基线有什么区别？

如何定位 CSS 网格布局中的特定列或行？

为什么无论我做什么都不能改变复选框的 colored颜色？

悬停效果：展开底部边框

我应该如何组织我的 CSS 文件的内容？

完成后如何防止css3动画重置？

CSS flex，如何在第一行显示一个项目，在下一行显示两个项目

使用：focus 设置外部 div 的样式？

在 CSS 中使用多个 @font-face 规则

背景图像可以大于 div 本身吗？

如何使用 CSS 消除元素的偏移量？

将 -moz-available 和 -webkit-fill-available 放在一个宽度中(CSS 属性)