折りたたまれたときの不均一なブートストラップピル

Question

次のコードは、小さな（またはデフォルトではtwitterブートストラップで定義されている）小さな画面に表示されるときに、不等幅の "ピル"を生成します。

<header> 
    <div id="brand" class="container"> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <h1>Website</h1> 
       <h2>header</h2> 
      </div> 
     </div> 
    </div> 

    <div id="navbar" class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navs"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div id="navs" class="collapse navbar-collapse"> 
      <ul class="nav nav-pills nav-justified"> 
       <li class="active"> 
      <a href="/home">Home</a> 
       </li> 
       <li> 
        <a href="/about">About</a> 
       </li> 
       <li> 
        <a href="/portfolio">Portfolio</a> 
       </li> 
       <li> 
        <a href="/blog">Blog</a> 
       </li> 
       <li> 
        <a href="/contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</header> 

最初のピルは、残りの部分より正確に2ピクセル幅が大きいようです。私は丸薬がディスプレイの全幅を満たすことを好むだろう。

これはブートストラップのバグですか、それとも単純なCSSで対処できるものですか？

JSFiddle：https://jsfiddle.net/elikmiller/z2og3vq7/

Answer 1

なぜあなたは一例nav-customのためのカスタムクラスを追加するには、カスタムCSSをブートストラップCSSをオーバーライドして、カスタムCSSファイル

.nav-custom>li>a { 
     padding: 10px 10px; 
} 

​​

Answer 2

あなたはnav-stackedと呼ばれるあなたのhtml内の別のクラスを使用する必要があります。私はhere完全な例を見ることができ、ここで関連するHTML部分を見ることができますあなたのフィドルを更新しました。

<ul class="nav nav-pills nav-stacked nav-justified"> 
    <li class="active"> 
     <a href="/home">This one is 2px wider</a> 
    </li> 
    <li> 
     <a href="/about">About</a> 
    </li> 
    <li> 
     <a href="/portfolio">Portfolio</a> 
    </li> 
    <li> 
     <a href="/blog">Blog</a> 
    </li> 
    <li> 
     <a href="/contact">Contact</a> 
    </li> 
    </ul>