Bootstrap流體網格重疊問題

我一直在使用流體網格玩Twitter Bootstrap一段時間，但即使在最新版本中，我發現無法創建流體網格而沒有獲取重疊元素。包含正確的bootstrap css文件並且所有標記都是正確的，所以我只能假設這是與輸入字段有關，但我會認爲Bootstrap的創建者會考慮這一點？Bootstrap流體網格重疊問題

您可以在此處查看代碼：http://jsfiddle.net/pNRzV/1/ 嘗試重新調整內容窗口大小，您將看到重疊的問題。

歡迎任何意見/評論，感謝您的時間！

<div class="container-fluid"> 
<div class="row-fluid"> 
    <div class="span2"> 
    <div class="well well-small"> 
     <ul class="nav nav-list" id="navigation"> 
     <li><a href="/link" >link</a></li> 
     <li><a href="/link" >link</a></li> 
     <li><a href="/link" >link</a></li> 
     <li><a href="/link" >link</a></li> 
     <li><a href="/link" >link</a></li> 
     <li><a href="/link" >link</a></li> 
     </ul> 
    </div> 
    </div> 
    <div class="span10"> 
    <div class="row-fluid"> 
     <div class="span3"> 
     <form method="POST"> 
      <fieldset> 
      <legend>Some Random details</legend> 
      <select> 
       <option value="volvo">Volvo</option> 
       <option value="saab">Saab</option> 
       <option value="mercedes">Mercedes</option> 
       <option value="audi">Audi</option> 
      </select> 
      <select> 
       <option value="volvo">Volvo</option> 
       <option value="saab">Saab</option> 
       <option value="mercedes">Mercedes</option> 
       <option value="audi">Audi</option> 
      </select> 
      <select> 
       <option value="volvo">Volvo</option> 
       <option value="saab">Saab</option> 
       <option value="mercedes">Mercedes</option> 
       <option value="audi">Audi</option> 
      </select> 
      <input type="submit" class="btn btn-primary" name="submit" value="Submit"> 
      </fieldset> 
     </form> 
     </div> 

     <div class="span3"> 
     <fieldset> 
      <legend>Some random long legend</legend> 
      <ul> 
      <li><a href="/"> 
       <i class="icon-film"></i>berkeley napier 3</a> 
       <a href="/"><i class ="icon-trash"></i></a> 
      </li> 
      </ul> 
      <div class="btn-group"> 
      <a class="btn btn-small btn-inverse" href="/">Preview Something</a> 
      <a class="btn btn-small btn-inverse" href="/">Preview Something else</a> 
      </div> 
     </fieldset> 
     </div> 

     <div class="span3"> 
     <fieldset> 
      <legend>Options</legend> 
      <div class="btn-group-vertical"> 
       <a class="btn btn-info" href="/">Some LongButton Text</a> 
       <a class="btn btn-info" href="/">Longer Long Button Text</a> 
       <a class="btn btn-info disabled" data-href="/">Button Text</a> 
       <a class="btn btn-info disabled" data-href="/">Button Text</a> 
      </div> 
     </fieldset> 
     </div> 

     <div class="span3 actions"> 
     <fieldset> 
      <legend>Buttons</legend> 
      <div class="btn-group btn-group-vertical"> 
      <a class="btn btn-primary" href="/"><i class="icon-list icon-white"></i> 
       Create Something 
      </a> 
      <a class="btn btn-primary" href="/"><i class="icon-circle-arrow-down icon-white"></i> Download Something</a> 
      <a class="btn btn-primary" href="/"><i class="icon-share icon-white"></i> Some Button</a> 
      </div> 
     </fieldset> 
     </div> 
    </div> 
    </div> 
</div>

來源

2012-12-11 Oli C

我設法與引導人一些幫助，最終解決這個問題，我想我會在這裏發表的幫助的情況下，它是使用的任何人在將來別人！

的重疊正在發生是因爲兩個原因：

上柱，使用.btn組，可能是小的。（btn-groups不會分成垂直組）。相反，使用.btn-group-vertical類就像其他類一樣。
標籤的默認寬度設置在它們上面，因此添加類「.span11」修復了此問題。

來源

2012-12-14 15:35:56

Bootstrap流體網格重疊問題

回答

相關問題