Bootstrap - 嵌套的最佳實踐 - 行和跨度

Question

嵌套的最佳使用方式是什麼？內排

多個跨度 - 動態內容：

每12

• 一行列？
• 或者，對於任意列數的一行？

樣品情況下，n°1 - 哪一個是最好的&爲什麼呢？ ：

<div class="row"> 
    <span class="span6"></span> 
    <span class="span6"></span> 
    <span class="span6"></span> 
    <span class="span6"></span> 
</div> 

或者

<div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 
<div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

---

樣品情況下，n°2 - 更水平來組織內容。

此處使用div「my_margin」在左邊添加一些邊距&右邊 - 您必須在其周圍有「first_row」。

因此，它是：行 - > span10，誤差1 - >列 - > SPANS

<div id="first_row" class="row"> 
    <div id="my_margin" class="span10 offset1"> 
     <div class="row"> 
      <div class="span6"></div> 
      <div class="span6"></div> 
      <div class="span6"></div> 
      <div class="span6"></div> 
     </div> 
    </div> 
</div> 

或者，

你不應該使用span10，OFFSET1但直接保證金;

在這種情況下，您必須爲每個@Media_size創建規則以使其響應。

<div style="margin-right:XYpx; margin-left:XYpx" class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

或者 - 跨度是「應該」是使用你的主要內容，然後你只用CSS玩。所以，這樣的事情：

<div row> 
    <div class="span6"> 
     http://jsfiddle.net/JkPhw/ 
    <div class="span6"> 
    <div class="span6"> 
     http://jsfiddle.net/JkPhw/ 
    <div class="span6"> 
</div> 

Answer 1

要區分N°1：

這取決於，如果您有例如九個玩笑其中3個玩笑填充線名單，我會做它有一個行：

<ul class="row"> 
    <li class="span4"></li> 
    <li class="span4"></li> 
    <li class="span4"></li> 
    <!-- six more --> 
</ul> 

如果您使用的網格布點形式，我會做一排的每個標籤輸入對：

<!-- one label-input pair does not fill the whole content width --> 
<form> 
    <div class="row"> 
     <label class="span3"></label> 
     <input class="span5" /> 
    </div> 
    <div class="row"> 
     <label class="span3"></label> 
     <input class="span5" /> 
    </div> 
    <!-- and so on --> 
</form> 

我認爲你不應該創建一個網格並把你的內容放在不同的網格單元中來佈局它，但是建立語義上正確的標記並應用網格來佈置內容（微小的差異）。

PS：記住box-sizing。

爲N°2：

我不太明白我的意思那裏，如果你使用的網格，你不應該左/右利潤率適用於它。網格取決於它的水平邊界，以便正常工作...如果你必須改變這個以匹配你的前端和設計，那麼它可能不再在網格中。

更新：儘管如果你有更小的內容，我肯定會使用你的第一個例子。但使用正確的網格跨度寬度：

<article class="row"> 
    <header class="span12"></header> 
    <div class="span10 offset1"> 
     <div class="row"> 
      <div class="span5"></div> 
      <div class="span5"></div> 
     </div> 
    </div> 
</article>