Bootstrap - 容器中的中心标签

我有一个使用Bootstrap 3的网页。在这个页面中，我有几个标签。此时，选项卡在顶部左对齐。你可以看到你自己在这个Bootply。我试图找出如何使选项卡出现在标签条的中心。截至目前，它看起来像这样：Bootstrap - 容器中的中心标签

+-------+-------+ 
| Tab 1 | Tab 2 | 
+  +-------+--------------------------------------------------+ 
| content               | 
|                 | 
|                 | 
|                 | 
+------------------------------------------------------------------+

不过，我想使它看起来像这样：

      +-------+-------+ 
          | Tab 1 | Tab 2 | 
+-------------------------+  +--------------------------------+ 
| content               | 
|                 | 
|                 | 
|                 | 
+------------------------------------------------------------------+

我尝试使用文本中心级没有成功。我知道ul是一个块级元素，所以它填充其容器的宽度。为此，我尝试在ul上设置float:left。但是那也行不通。 Bootply再一次是here。代码如下所示：

<div class="container-fluid"> 
    <div class="container"> 
     <ul class="nav nav-tabs" role="tablist"> 
      <li role="presentation" class="active"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">First Tab</a></li> 
      <li role="presentation"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">Second Tab</a></li> 
     </ul> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane active" id="first"> 
        <h2>First Tab</h2> 
       </div> 

       <div role="tabpanel" class="tab-pane" id="second"> 
        <h2>Second Tab</h2> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我不知道如何让选项卡居中。

来源

2016-09-30 Zach Templeton

试试这个https://jsfiddle.net/czd60374/1/ –

我认为这是你在找什么https://stackoverflow.com/a/9422253/5168300

复制这个答案

导航的选项卡列表中的项目会自动漂浮由引导左边，所以你必须重置，而是显示它们作为内联块，以及中心的菜单项，我们必须添加文本对齐的属性：中心容器，就像这样：

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/

编辑：修补版本，在IE7 +用户提供工作@My头在下面的评论伤害了下来。

来源

2016-09-30 17:12:45

你将有更新的CSS为ul.nav-tabs和li，像这样：

ul.nav-tabs { 
    text-align: center; 
} 
ul.nav-tabs li { 
    float: none; 
    display: inline-block; 
}

下面是一个小提琴链接：https://jsfiddle.net/m0nk3y/pwyumb3k/

来源

2016-09-30 17:13:24

你可以试试这个代码

HTML：

<ul class=" ul-center" role="tablist"> 
      <li><a href="#">Item 1</a> </li> 
      <li><a href="#">Item 2</a> </li> 
    </ul>

CSS：

.ul-center{ 
    margin:0; 
    padding:0; 
    clear:both; 
    text-align:center; 
} 
.ul-center li{ 
    display:inline-block; 
    padding:10px 20px; 
    background-color:#fff; 
    margin:0; 
}

现场演示：https://jsfiddle.net/czd60374/1/

来源

2016-09-30 17:19:09

Bootstrap - 容器中的中心标签

回答

相关问题