Bootstrap 3 - 6列Cols-sm-2在第12列之前打包

Question

http://bootsnipp.com/snippets/gjONo 我有一個使用導航藥丸的頁腳。在這種情況下，我將它們設置爲col-sm-2類，並將其中的6個連續放置。 最後一個包裝到第二行。 我需要做些什麼來進行調整，使其適合一條線？ 我假設nav-pill添加了一些打破網格的填充。 謝謝。

Answer 1

這主要是由於在導航藥丸內部放置了列。導航欄的邊距爲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>