ナビゲーションバーのドロップダウンブーストボタンを強制的にコンテナ幅全体に塗りつぶす方法はありますか？

Question

私はページのすべての部分を保持するコンテナを持つHTMLの本文では

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"> 
</script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"> 
</script> 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com 
/bootstrap/3.1.1/css/bootstrap.min.css"> 

でCSSやJSをロードしました。 ドロップダウンなしでリンクを使用すると、ボタンがコンテナの幅を自動的に埋めます。しかし、いったんボタンをドロップダウンすると、ボタンの幅はコンテナを埋めるための自動サイズにはなりません。 navbarのコードは次のとおりです。

<div class="container"> 
    <div class="masthead"> 
    <h3 class="text-muted"></h3> 
    <nav> 
     <ul class="nav nav-justified"> 


      <li> 
      <div class="btn-group"> 
       <button class="btn btn-primary dropdown-toggle " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
       Home 
       </button> 
       <ul class="dropdown-menu"> 
       <li><a href="#">link</a></li> 

       <li role="separator" class="divider"></li> 
       <li><a href="#">Contact </a></li> 
       </ul> 
      </div> 
      </li> 
      <li> 
      <div class="btn-group"> 
       <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       Home 
       </button> 
       <ul class="dropdown-menu"> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Contact </a></li> 
       </ul> 
      </div> 
      </li> 
      <li> 
      <div class="btn-group"> 
       <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       Home 
       </button> 
       <ul class="dropdown-menu"> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Contact </a></li> 
       </ul> 
      </div>    
      </li> 
      <li> 
      <div class="btn-group"> 
       <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       Home 
       </button> 
       <ul class="dropdown-menu"> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Contact </a></li> 
       </ul> 
      </div> 
      </li> 
      <li> 

      <div class="btn-group"> 
       <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
         Home 
       </button> 
       <ul class="dropdown-menu"> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
      </li> 
      <li> 
      <div class="btn-group"> 
       <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       Home 
       </button> 
       <ul class="dropdown-menu"> 
       <li><a href="#">link</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
      </li> 





     </ul> 
    </nav> 
</div> 

コンテナは後でHTMLで閉じられます。ボタン幅をオートスケールにしてコンテナの幅を埋める方法についての助けがあれば、大歓迎です。私はボタンが幅を埋めるまで、ボタン名の周りに白いスペースを追加することは明らかです。しかし、必要な空白の量は異なるデバイスでは同じではありません。私はCSSオーバーライドがそれを行うと思っていますが、私は動作するものを見つけていません。

Answer 1

btn-groupの表示プロパティを変更し、ボタンに幅を追加します。

button.btn.btn-primary.dropdown-toggle { 
    width: 100%; 
} 
.btn-group { 
    display: block; 
} 

Demo

Answer 2

あなたは、下記の手順に従うことによってそれを可能にすることができます。

1. Bootstrap's Helper Classcenter-blockは、要素ブロック要素を作るために使用されます。このクラスをブロック要素にするには、このクラスを.btn-groupで使用します（ブロック要素は、オーバーライドされない限り、デフォルトでフルブラウザ幅になります）。
2. Bootstrap's Button Size Classbtn-blockを使用して、利用可能な幅のブロックボタンを作成することができます。このクラスを他のボタンクラスと共に使用すると、フル幅のボタンを使用できます。

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com 
 
/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <div class="masthead"> 
 
    <h3 class="text-muted"></h3> 
 
    <nav> 
 
     <ul class="nav nav-justified"> 
 
     <li> 
 
      <div class="btn-group center-block"> 
 
      <button class="btn btn-primary btn-block dropdown-toggle " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
       Home 
 
      </button> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">link</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Contact </a></li> 
 
      </ul> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="btn-group center-block"> 
 
      <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Home 
 
      </button> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">link</a></li> 
 
       <li><a href="#">link</a></li> 
 
       <li><a href="#">link</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Contact </a></li> 
 
      </ul> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="btn-group center-block"> 
 
      <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Home 
 
      </button> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">link</a></li> 
 
       <li><a href="#">link</a></li> 
 
       <li><a href="#">link</a></li> 
 
       <li><a href="#">link</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Contact </a></li> 
 
      </ul> 
 
      </div>    
 
     </li> 
 
     <li> 
 
      <div class="btn-group center-block"> 
 
      <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Home 
 
      </button> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">link</a></li> 
 
       <li><a href="#">link</a></li> 
 
       <li><a href="#">link</a></li> 
 
       <li><a href="#">link</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Contact </a></li> 
 
      </ul> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="btn-group center-block"> 
 
      <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Home 
 
      </button> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">link</a></li> 
 
       <li><a href="#">link</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="btn-group center-block"> 
 
      <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Home 
 
      </button> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">link</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div>