35

我正在尝试调整 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>

我得到了这个（不想要的）结果：

不需要的标签

但是，我希望选项卡“标题”跨越选项卡容器的整个宽度 - 并均匀分布它们的各个宽度，类似于这样的预期结果：

所需的标签

我该如何做到这一点？

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

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

更新 3：如果我删除/注释掉

 /* table-layout: fixed; */

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

这也不是我想要的：

不需要的标签

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

4

9 回答 9

68

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>
于 2014-07-31T15:24:36.907 回答
32

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

使用 css 创建该类：

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

然后将该类应用于您的li标签到您的ul. 这样做li会占用他们可以使用的空间，并自动将空间划分为单行。

演示

于 2013-07-12T09:34:17.667 回答
5

您可以使用 javascript 和 jquery。

基于上面尼克布尔的回答，您可以使用 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>
于 2013-07-09T15:37:50.700 回答
5

引导程序 4

现在使用nav-fill该类获取全角选项卡非常简单。这适用于所有现代浏览器，包括 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>

演示

要获得完全等宽的制表符，请使用nav-justified：

<ul class="nav nav-tabs nav-justified">
     <li class="nav-item">...</li>
</ul>
于 2019-12-04T14:01:48.433 回答
2

尝试

.nav-tabs > li {
    float:none;
    display: table-cell;
    width: 1%;
}
于 2016-02-24T10:03:03.577 回答
1

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

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

它将使选项卡跨越其容器的整个宽度。

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

于 2013-07-15T05:58:48.053 回答
1

简单的：

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

希望有帮助！

于 2013-07-09T14:20:26.067 回答
0

试试这个，对所有的 '.nav-pills' 和里面的每个 'li' 元素都有双循环。

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'});
    });
});}

演示 http://jsfiddle.net/

于 2015-06-09T16:14:11.400 回答
0 
<style>
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        flex: auto;
}
    
.nav-tabs .nav-link {
        flex: auto;
}
</style>

这就是我一直在寻找的。

于 2021-09-20T12:02:43.417 回答