Bootstrap列在流體佈局中重疊

我一直在試圖找出與此相關的一段時間沒有運氣發生了什麼。我已經將我的代碼剝離了我想要實現的最基本的示例，並且無法弄清楚爲什麼我的列重疊而不是堆疊。Bootstrap列在流體佈局中重疊

失敗的jfiddle可以在這裏找到。 http://jsfiddle.net/rB9Md/

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4"> 
      <div style="border:1px solid black; min-width:400px; width:400px"> 
       span4 
      </div> 
     </div> 
     <div class="span4"> 
      <div style="border:1px solid red; min-width:400px; width: 400px"> 
       span4 
      </div> 
     </div> 
     <div class="span4"> 
      <div style="border:1px solid green; min-width:400px; width: 400px"> 
       span4 
      </div> 
     </div> 
    </div> 
</div>

爲什麼不堆疊列如預期？我已經嘗試了許多變化的寬度，最大寬度，最小寬度在各個地方沒有成功。我會假設，一旦span4柱收縮到小於的內容設置寬度，將堆放....

來源

2013-07-24 Shane

'min-width'和'width'正在搞亂它......刪除內聯樣式。 – Schmalzy

http://jsfiddle.net/ZRpSZ/1/

你不想使用min-width，width風格在這種情況下，如果你可以避免它。

引導程序的span4已經打算使該列跨越屏幕寬度的33％（4/12），或者如果屏幕寬度太小，則會崩潰。在使用引導程序時，您希望使用網格系統儘可能多地佈置列。作爲參考，請參閱this。

如果您總是需要列寬爲400px，那麼您將無法在大多數屏幕寬度中並排獲取它們。所以你應該考慮你希望如何反應。

標準的引導網格系統採用12列，使得對於未啓用響應功能 940px寬的容器。隨着響應式CSS文件的添加，根據您的視口，網格可以調整爲724px和1170px寬。在767px以下的視口中，這些列將變爲流體並垂直疊加。

當列堆疊時，您可以設置max-width:400px，以便它們只保留那麼寬。

來源

2013-07-24 14:43:30

這對我來說似乎並不實際。如果沒有寬度，這些列在堆疊之前會縮小到200px左右。它決定在什麼時候堆疊。 200px使3列看起來很糟糕。然後，一旦他們堆疊，他們都很好。 – Shane

流體行用於流體內容。如果您的色譜柱不流動，則不應使用它。這就是說，引導程序網格小於1200像素，因此在您更改引導程序中的維度或者不使用引導程序之前，不會出現3個並排的400像素列。 –

以下是使用媒體查詢的無引導版本，可能更適合您的需求：http://jsfiddle.net/nS6az/2/ –

Bootstrap列在流體佈局中重疊

回答

相關問題