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

5

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>
于 2013-07-09T15:37:50.700 に答える
1

このソリューションを試してみてください。それを実現するためのコードは 1 行だけです。

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

タブがコンテナの全幅に広がるようにします。

jsfiddle を見てください: http://jsfiddle.net/BhGKf/

于 2013-07-15T05:58:48.053 に答える