全宽标签，每个标签有足够的空间

Question

我的视图中有bootstrap tabs代表星期几。标签按标签中的内容宽度显示，而不占据页面中的完整width。

我的要求是全宽标签。我用Google搜索并找到了几个答案，但所有答案都给每个标签提供了相同的宽度（Full width tabs using Bootstrap (Support IE)）。答案是好的，但在我的情况下，一个标签没有获得足够的空间，因此内容分为两行（7月16日星期三）。

那么如何为每个标签创建足够空间的全宽标签？今天选项卡有可用空间，可以将空间提供给其他选项卡。

修改........................................... ..........................................

使用bootstrap 2.3.2

Answer 1

如果是引导程序，您应该可以使用nav-justified类。

http://getbootstrap.com/components/#nav-justified

Answer 2

看到这个小提琴http://jsfiddle.net/ZdU8j/ 主要属性为display: table-cell和width: 1%

Answer 3

试试这个：

<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 class="extraWidth"><a href="#messages" data-toggle="tab">Messagesssssss</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<style type="text/css">
.nav-tabs li {
    width: 24%;
}
.extraWidth {
    width: 28%;
}
</style>

对于较大的tab，您应该为所有宽度和宽度的额外百分比提供一定百分比的宽度。确保总宽度百分比应为100％。