Question

我正在尝试调整Bootstrap选项卡，使它们跨越容器的整个宽度。这是我的代码（最小的工作示例）：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Full Width Tabs using Bootstrap</title>
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
        <style>
            .full-width-tabs > ul.nav.nav-tabs {
                display: table;
                width: 100%;
                table-layout: fixed; /* To make all "columns" equal width regardless of content */
            }
            .full-width-tabs > ul.nav.nav-tabs > li {
                float: none;
                display: table-cell;
            }
            .full-width-tabs > ul.nav.nav-tabs > li > a {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="tabbable full-width-tabs">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-one" data-toggle="tab">Tab 1</a></li>
                <li><a href="#tab-two" data-toggle="tab">Tab 2</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-one">
                    I'm in Tab 1.
                </div>
                <div class="tab-pane" id="tab-two">
                    Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. 
                </div>  
            </div> 
        </div> <!-- /tabbable -->

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

    </body>
</html>

我得到了这个（不受欢迎的）结果：

Undesired tabs

但是，我希望标签“标题”跨越标签容器的整个宽度 - 并均匀分布各自的宽度，类似于所需的结果：

desired tabs

我如何实现这一目标？

更新1：这是一个JSFiddle：http://jsfiddle.net/agib/FZy4n/

更新2：我已经使用自定义javascript创建了一个工作小部件。但是，我正在寻找一种与Bootstrap无缝集成的解决方案，因此只依赖于标准的Bootstrap javascript。

更新3：如果我删除/退出

 /* table-layout: fixed; */

标题宽度根据需要占用所有水平空间。但是，它们的宽度是由标题文本的长度产生的，因此不能均匀分布。

这是不我想要的：

undesired tabs

更新4：即将推出的Bootstrap 3似乎使用全局标签作为标准组件使用课程.nav-justified：Bootstrap 3 -> Navs -> Justified nav

Answer 1

Twitter Bootstrap 3包含一个类， nav-justified 类。

像这样使用它：

<ul class="nav nav-tabs nav-justified">
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a></li>
</ul>

Answer 2

也许我找到了你的解决方案：

使用css创建该类：

.take-all-space-you-can{
    width:100%;
}

然后将该类应用到您的li ul标签中。完成所有这些li占用了它们可以占用的空间并自动划分单行中的空间。

DEMO

Answer 3

您可以使用javascript和jquery。

基于Nick Bull的上述答案，您可以使用Jquery动态确定页面上的标签数量。

在你的html页面上试试这个。

<script type="text/javascript">
   $(document).ready(function() {
       var numTabs = $('.nav-tabs').find('li').length;
       var tabWidth = 100 / numTabs;
       var tabPercent = tabWidth + "%";
       $('.nav-tabs li').width(tabPercent);
   });
</script>

Answer 4

尝试

.nav-tabs > li {
    float:none;
    display: table-cell;
    width: 1%;
}

Answer 5

简单：

.nav-tabs > li {
    /* width = (100 / number of tabs). This example assumes 3 tabs. */
    width:33.33333%;
}

希望有所帮助！

Answer 6

试试这个解决方案，只需一行代码即可实现。

.full-width-tabs > ul > li {   width: 100%;  }

它会使标签跨越其容器的整个宽度。

看看jsfiddle：http://jsfiddle.net/BhGKf/

Answer 7

试试这个，对于所有人来说，.nav-pills＆＃39;而且每个人都在＆＃39;元素里面有双循环。

function(){
$('.nav.nav-tabs').each(function(){
    var liGroup = $(this).children('li');
    var liLength= liGroup.length;
    liGroup.each(function(){
        var liWidth = 100/liLength-1;
        $(this).css({'min-width': liWidth+'%','margin-left':'0px','margin-right':'0px'});
    });
});}

DEMO http://jsfiddle.net/

Answer 8

更新2019-Bootstrap 4

对于将来的读者来说，使用nav-fill类获取全角Tabs现在非常简单。这适用于所有现代浏览器，包括IE 11 + ...

要获取全角标签，请使用（按标签内容的大小）：

  <ul id="myTabs" class="nav nav-tabs nav-fill">
      <li class="nav-item"><a href="#tab1" data-target="#tab1" data-toggle="tab" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#tab1" data-target="#tab2" data-toggle="tab" class="nav-link active">Profile</a></li>
      <li class="nav-item"><a href="#tab3" data-target="#tab3" data-toggle="tab" class="nav-link">Messages</a></li>
  </ul>

Demo

要获取完全等于宽度的标签标签，请使用nav-justified：

<ul class="nav nav-tabs nav-justified">
     <li class="nav-item">...</li>
</ul>

使用Bootstrap的全宽标签（支持IE）

8 个答案: