web-dev-qa-db-ja.com

Bootstrap（IEをサポート）を使用した全幅タブ

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：

desired tabs

どうすればそれを達成できますか？

更新1：ここにJSFiddleがあります： http://jsfiddle.net/agib/FZy4n/

更新2：すでにカスタムjavascriptを使用する機能するウィジェットがありました。しかし、私はBootstrap=と見た目もなく統合し、したがって標準のBootstrap= javascriptにのみ依存するソリューションを探しています。

更新3：削除/コメントアウトした場合

 /* table-layout: fixed; */

ヘッダーの幅は、必要に応じてすべての水平スペースを占有しています。ただし、それらの幅はヘッダーテキストの長さに起因するため、均等に分散されません。

これは、notのどちらかです：

undesired tabs

更新4：今後のBootstrap 3は、クラス.nav-justified： ブートストラップ3-> Navs-> Justified nav

htmlcsstwitter-bootstraptabs
30
agibsen

たぶん私はあなたの解決策を見つけました：

Cssを使用してそのクラスを作成します。

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

そして、そのクラスをliタグにulに適用します。これらのすべてのliを実行すると、可能なスペースが使用され、単一行のスペースが自動的に分割されます。

[〜＃〜] demo [〜＃〜]

30
rkpasia

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>
63
JMK

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>
5
rcheuk

試して

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

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

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

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

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

1
Rajesh Hegde

シンプル：

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

お役に立てば幸いです！

1
Nick Bull

これを、すべての「.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/

0
Rene Rubio