嵌套列的良好做法？

Question

我無法找到任何的規則，規定這是否是一件應該做的事。自舉明確概述之中其規則如下：

• 行必須被放置爲適當對準和填充一個.container（固定寬度）或 .container流體（全寬）內

• 用行來創建列

• 內容應放在列內，只列可以
  行的直接孩子的水平組

所以從這個筆者的結論是，我確實想自成體系將有一個container類網站的每個部分。在此範圍內，我們將有一個row，其中我們有一個column。像這樣：

<div class="container"> 
    <div class="row"> 
     <div class="col">COL 1 of 2</div> 
     <div class="col">COL 2 of 2</div> 
    </div> 
</div> 

現在的問題是，規則指定僅列可能是行的直接孩子，但它並沒有說柱的孩子應該是什麼。如果我想要在另一列中「嵌套」另一組雙列，我會像寫一個或兩個情況那樣編寫它嗎？

<div class="container"> 
    <div class="row"> 
     <div class="col"> <!--Columns within columns without a row--> 
      <div class="col"> 
      <div class="col"> 
     </div> 
     <div class="col"> <!--Row nested before nesting columns--> 
      <div class="row"> 
       <div class="col"> 
       <div class="col"> 
      </div> 
     </div> 
    </div> 
</div> 

兩者都在實際製作頁面方面工作，但我不知道什麼被認爲是「良好實踐」。兩種書寫方式都有明顯的侷限性。在我的情況下，我希望「列」填充動態生成的元素數量，在不同的屏幕分辨率/響應大小將對齊，所以行包裝不是一個選項。我不知道每行有多少個元素，這會在下面的行不需要時破壞和換行。

那麼，是不是還好列中嵌套列無行持有的孩子嗎？

Answer 1

嵌套行是更好的語義，並且在一些邊緣的情況下，保持該設計。然而，這是意見，但基於最佳實踐的觀點。

我之前把該行的列只是爲了你的意圖明確，使其更加模塊化。

這是最好想想作爲一個模塊，並問自己：「我能解除標記的這一部分離開其位置，並把它放在其他地方的頁面上，它仍然保持其形式？」通過將其封裝在一行中，您可以對該問題回答「是」。當然，它總是在我們如何看待我們的結構化標記和CSS僅在標記是必要的，是模塊化的，但一些概念如SMACSS，面向對象的CSS等把...帶頭之間的戰鬥似乎它是共識爲了維持模塊化，需要額外的標記。

Answer 2

你應該把所有嵌套.row S的內部一個.container的遏制切緣陰性，只有鳥巢.col內.row：

<div class="container"> 
    <div class="row"> 
     <div class="col"> <!--Row nested before nesting columns--> 
      <div class="container"> 
      <div class="row"> 
       <div class="col"> </div> 
       <div class="col"> </div> 
      </div> 
      </div><!-- .container --> 
     </div> 
    </div> 
</div>