如何在页面上将twitter自定义选项卡置中？ [英] How do I center the twitter bootstrap tabs on the page?

问题描述

我使用twitter bootstrap来创建可切换的标签页。这里是我使用的css：

I'm using twitter bootstrap to create togglable tabs. Here is the css I'm using:

<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经验的人会知道如何做这个。

This html displays the tabs correctly, but pulled to the left (which is what is supposed to happen). I've tried tinkering with the CSS to get the tabs to center on the page, but no luck yet. I thought someone with more css experience would know how to do this.

注意，有一个关于中心nav丸的问题，我试过，

As a note, there is another question about centering nav pills, which I tried, but it didn't work with just plain nav tabs.

推荐答案

nav-tabs 列表项由引导程序自动浮动到左边，所以你必须重置它，而不是显示为 inline-block ，并且为了居中菜单项，我们必须将 text-align：center 的属性添加到容器，如下所示：

nav-tabs list items are automatically floated to the left by the bootstrap so you have to reset that and instead display them as inline-block, and to center menu items we have to add the attribute of text-align:center to the container, like so:

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/
在此处编辑： http://jsfiddle.net/U8HGz/2/

编辑：

演示： http://jsfiddle.net/U8HGz/3/show/
在此处编辑： http：// jsfiddle.net/U8HGz/3/

这篇关于如何在页面上将twitter自定义选项卡置中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！