2012-12-03 117 views
0

當使用Bootstrap流體網格時,是否需要在內容跨越整行寬度時聲明列。換句話說,這是足夠twitter bootstrap流體網格列

<div class="row-fluid"> 
    This column should span the full width of the row 
</div> 

或者是它真的有必要做到這一點(如文檔建議):

<div class="row-fluid"> 
    <div class="span12">This column should span the full width of the row</div> 
</div> 

此外,當我想在流體格窩列,按到docs

嵌套流體網格是有點不同的[給非流體格]:嵌套的列數不應該匹配列的父數目。相反,嵌套列的每個級別都會重置,因爲每行都佔用父列的100%。

該文檔然後繼續舉這個例子,其中第一行是一個全寬列和第二行具有2個半寬度列

<div class="row-fluid"> 
    <div class="span12">Fluid 12 
    <div class="row-fluid"> 
     <div class="span6">Fluid 6</div> 
     <div class="span6">Fluid 6</div> 
    </div> 
    </div> 
</div> 
從行的類名

除了,我不明白這是如何與非流體網格完全不同的。此外,這個例子似乎矛盾的說法

嵌套的列數不應該匹配列的父母的人數

因爲我最後一次檢查6 + 6 = 12,有人能在這個提高說明?

回答

4

(1)我看不出這是在所有不同的非流體網格

  • 它使用百分率值

(2)嵌套的列數應不匹配列父的數量

好,壞榜樣,他們僅僅意味着是,在類名的數量應該總是加起來12,不管它們是嵌套的東西。

這是正確的:

<div class="row-fluid"> 
    <div class="span6 row-fluid"> 
    <div class="span4"> &nbsp; </div> 
    <div class="span4"> &nbsp; </div> 
    <div class="span4"> &nbsp; </div> 
    </div> 
</div> 

,而不是這一點,這是錯誤的:

<div class="row-fluid"> 
    <div class="span6 row-fluid"> 
    <div class="span2"> &nbsp; </div> 
    <div class="span2"> &nbsp; </div> 
    <div class="span2"> &nbsp; </div> 
    </div> 
</div> 
+0

要回答這個問題的第一部分:是的,它是必要的巢行類中的跨度類,否則內容將以負值左邊距結束,這將導致它離開電網。 span類正確縮進內容。 – ReLeaf