Twitter-bootstrap：如何正確使用行流體類？

我對理解row-fluid類如何工作有困難。根據documentation它調整自己以液體設計，如響應式設計。所以，如果它有足夠的空間，它會使它適合在同一行，否則它會到下一行。Twitter-bootstrap：如何正確使用行流體類？

但是看着這裏這個例子：https://duelify.com/

奇怪的是前三個文章標題適合在第一行。第二排和其餘部分稍微向右推。但是看看html（下面），不會有其他類引起這種「副作用」。

enter image description here

爲什麼不是文章標題中的一排接頭。爲什麼這兩者之間存在這種隨機差距？有沒有辦法讓它們看起來有序而沒有任何間隙？

來源

2013-04-22 Houman

.row流體已經從自舉3除去起。以上問題涉及3之前的Bootstrap版本 – Kunal 2015-01-18 03:35:36

在你的情況，適當的代碼會像

<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 
<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 

etc...

在span類的每一個row-fluid類最高金額必須達到12跨度類都留有餘量。只有一個row-fluid中的最後一個孩子沒有左邊距。

再看看Twitter Bootstrap documentation上的例子。「對於簡單的兩列布局，創建一個.row並添加相應數量的.span列。由於這是一個12列的網格，每個.span跨越了這12列中的許多列，並且總是應該加上12對於每一行（或列的父數目）「

來源

2013-04-23 01:44:48

這裏有一些事情正在進行。請記住，默認情況下，流體行中跨度的總大小應該合計爲12.這裏還有很多，所以當css將span4的寬度定義爲大約33％時，它們實際上超過了100％，所以他們要走一條新路線。但是他們並沒有清理，所以你最終與他們循環，並在頁面上創建列。

你在第二行左邊有空格的原因是bootstrap定義了'gutters'來爲列提供一些餘量。由於正在使用多餘的列，因此您可以看到它們。有一個特定的CSS將行的第一個跨度上的排水溝減少到0，因此爲什麼第一個沒有空間。

隨後的'行'只有兩列，因爲額外的排水溝的存在拋出數學，並使三個span4加起來超過100％的寬度，導致它們包裹。

來源

2013-04-22 23:09:30 PCasagrande

下面的代碼將容器之後工作（對於響應佈局）：

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4"></div> 
    </div> 
    <div class="row-fluid"> 
     <div class="span4"></div> 
    </div> 
</div>

來源

2013-04-23 16:40:53

Twitter-bootstrap：如何正確使用行流體類？

回答

相關問題