ブートストラップ（サポートIE）を使用している全幅タブ

ブートストラップのタブをコンテナの全幅に亘って調整しようとしています。ここに私のコード（最小限の作業例）です：ブートストラップ（サポートIE）を使用している全幅タブ

<!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

： - タブコンテナと配布は、個々の幅の均等、この ようなものが結果を希望しました210

どのように達成できますか？

アップデート1：http://jsfiddle.net/agib/FZy4n/

アップデート2：はここにJSFiddleだ私はすでにカスタムJavaScript使用して作業ウィジェットを持っていました。しかし、私はBootstrapとシンプルに統合するソリューションを探しているので、標準のBootstrap JavaScriptのみに依存しています。

アップデート3：私は削除した場合/必要に応じて

/* table-layout: fixed; */

ヘッダー幅は、すべての水平方向のスペースを占有しているコメントアウトします。しかし、その幅はヘッダーテキストの長さに起因するため、均等に分散されません。

これは、私はどちらか欲しいものではありません。

undesired tabs

更新4：今後のブートストラップ3は、クラス.nav-justifiedを使用して、標準コンポーネントとしてフル幅のタブを持っているように見えます：Bootstrap 3 -> Navs -> Justified nav

出典

2013-07-09 agibsen

前と実際のヘッダの後に追加のタブ「ヘッダー」のための水平方向のスペースがあるようなものだが、それが来るべき場所を私は把握することはできませんから。 – agibsen

いくつのタブが必要ですか？わずか2？ – rkpasia

ええ、ブートストラップ3を使用することは本当の解決策ですが、答えのどれもがすべてのブラウザでそうするのではありません。それを回答として投稿するべきです。 – user568109

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

をCSSでそのクラスを作成します。その後、

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

そして、あなたのulにあなたのliタグにそのクラスを適用します。これらをすべて実行すると、liは可能なスペースをとり、1行のスペースを自動的に分割します。

DEMO

出典

2013-07-12 09:34:17 rkpasia

それは動作するようです！そして、ブートストラップではない余分なクラス（ '.take-all-space-you-can'）を追加するのを避けるために、' width'：100％ 'を' li'タグに直接適用することができます：[Updated JSFiddle] http://jsfiddle.net/agib/aCMc2/）ありがとうございます！ – agibsen

あなたのソリューションはWindows用のChrome、Firefox、Safariで動作しますが、残念なことにIE9またはIEでは動作しません。 – agibsen

IE9/10では、最初のタブが利用可能な水平スペースをすべて占有します。 – agibsen

シンプル：

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

希望に役立ちます！

出典

2013-07-09 14:20:26

ありがとうございますが、私は前もってタブの数を指定したくありません。私は、タブウィジェットが、（原則的に任意の数の）タブ間で幅全体を自動的に配布したいと思っています。 – agibsen

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-09 15:37:50 rcheuk

ありがとうございます。しかし、私は何らかの形で余分なJavaScriptを導入することはできません。実際には、カスタムjavascriptを使用して完全に機能するフル幅のタブウィジェットを持っていましたが、標準のBootstrap JavaScriptのみに依存できるウィジェットを作成しようとしています。申し訳ありませんが、それは私の質問から明らかでない場合。 – agibsen

私は幅に合わせて100から99を減らしましたが、一般的にそれは動作します... thanx – okliv

簡体字：$（ '。nav-tabs li'）幅（（100/$（ '。nav-tabs'）。find長さ）+ '％'）; –

それを達成するために、コードの1行だけ、このソリューションをお試しください。

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

これは、タブをコンテナの全幅にまたがるようにします。 jsfiddleで

ルック：http://jsfiddle.net/BhGKf/

出典

2013-07-15 05:58:48

Twitterのブートストラップ3は、NAV詰めクラス、このためのクラスが含まれています。

ので、同じようにそれを使用します。

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

出典

2014-07-31 15:24:36 JMK

はい、私は知っていますが、IE8ではうまく動作していないようです。つまり、サポートする必要があります。 – agibsen

これは受け入れられる答えです。 – blackhawk

@blackhawkこれもブートストラップ4の一部ですか？私はまだそれを使用する機会を持っていない – JMK

は、すべての「.navピルと重ループと内部の各『李』要素のために、これを試してみてください。

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/

出典

2015-06-09 16:14:11

てみ

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

出典

2016-02-24 10:03:03

これは私のために働いた！ありがとう！ – Johncl

ブートストラップ（サポートIE）を使用している全幅タブ

答えて

関連する問題