ブートストラップ12列目の前に3〜6列のcols-sm-2ラップ

Question

http://bootsnipp.com/snippets/gjONo 私はnav-pillsを使用するフッターを持っています。この場合、私はそれらをcol-sm-2クラスに設定し、それらのうち6つを連続して配置しました。 最後の行は2行目にラップされます。 1行に適切にフィットするように調整するには何が必要ですか？ 私は、nav-pillがグリッドを壊す何らかのパディングを加えると仮定しています。おかげさまで

Answer 1

これは主にカラムをnav-pillsの内側に置いたためです。ナビゲーションには2pxの余白があり、これが列を調整しているので、折り返しが発生しています。

.nav-pills > li+li { 
    margin-left: 2px 
} 

また、nesting containersが一般に推奨ならびに列ずに行を使用していないとおそらくユースケースに応じて、他のクラスと行を混合（NAV-錠剤と行を使用しても、それらをラップします。 ）

Nav Justifiedを参照してください。達成しようとしている場合です。

実施例：

.nav-columns .nav-pills > li+li { 
 
    margin-left: 0 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h2>Problem with col-sm-2 wrapping prematurely</h2> Current Screen Resolution: 
 
    <span class="visible-xs-inline alert-danger">XS</span> 
 
    <span class="visible-sm-inline alert-warning">SM</span> 
 
    <span class="visible-md-inline alert-info">MD</span> 
 
    <span class="visible-lg-inline alert-success">LG</span> 
 
    <hr/>Problem - the 6th pill wraps to a second line, even though all of the visible pills are col-sm-2. 
 
    <br/>Something in using nav-pills breaking the grid calcs? 
 
</div> 
 

 
<footer class="footer"> 
 
    <div class="container"> 
 
    <div class="row nav-columns"> 
 
     <ul class="nav nav-pills"> 
 
     <li class="col-sm-2"><a href="#">Favs</a> 
 
     </li> 
 
     <li class="col-sm-2"><a href="#">Opt1</a> 
 
     </li> 
 
     <li class="col-sm-2"><a href="#">Opt2</a> 
 
     </li> 
 
     <li class="col-sm-2"><a href="#">Opt3</a> 
 
     </li> 
 
     <li class="col-sm-2"><a href="#">Opt4</a> 
 
     </li> 
 
     <li class="col-sm-2"><a href="#">Opt5</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</footer>