<分区>
<分区>
我有一个使用 Bootstrap 3 的网页。在这个页面中，我有几个选项卡。此时，选项卡在顶部左对齐。你可以在这个 Bootply 中看到你自己.我想弄清楚如何使选项卡出现在选项卡条的中央。截至目前，它看起来像这样:
+-------+-------+
| Tab 1 | Tab 2 |
+ +-------+--------------------------------------------------+
| content |
| |
| |
| |
+------------------------------------------------------------------+
但是，我试图让它看起来像这样:
+-------+-------+
| Tab 1 | Tab 2 |
+-------------------------+ +--------------------------------+
| content |
| |
| |
| |
+------------------------------------------------------------------+
我尝试使用文本中心类但没有成功。我知道 ul 是一个 block 级元素，所以它会填满其容器的宽度。出于这个原因，我尝试在 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>
我不确定如何让标签居中。
最佳答案
我认为这就是您要找的https://stackoverflow.com/a/9422253/5168300
复制这个答案
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 :无；
显示:内联 block ；
*显示:内联；/* ie7 修复 */
缩放:1；/* hasLayout ie7触发器 */
}
.nav-tabs, .nav-pills {
文本对齐:居中；
}
此处:http://jsfiddle.net/U8HGz/2/
编辑:在下面的评论中由用户@My Head Hurts 提供的在 IE7+ 中工作的补丁版本。
关于css - Bootstrap - 容器中的中心选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39796576/