在行外使用twitter bootstrap列類是一個好主意嗎？

Question

我想提高我的項目的HTML結構，我發現下面幾行內容：

<div class="full-sidebar"> 
    <div class="col-xs-12"></div> 
</div> 

其中「滿文」是一個自定義類。
我一直在想的是：這樣做是個好主意嗎？我會連續包裝專欄的div嗎？它只是感覺以目前的方式完成了「錯誤」。

Answer 1

我知道至少有一個使用行的理由。

「cols-」浮動並將它們連續包裹在一行中會添加清晰的所有列。這可以防止後續內容可能與您的列重疊。此外，它還確保行的高度等於列內容的高度。如果您不清除色譜柱的容器，那麼容器不會將色譜柱包含在其自身的高度。

請注意，「col-」僅浮動寬度大於992px。所以你只會遇到超出限制的內容重疊問題。看到這個fiddle。

HTML：

<div class="norow"> 
    <div class="col-md-6"></div> 
    <div class="col-md-6"></div> 
</div> 

CSS：

.row { 
    border: 2px solid yellow; 
} 
.norow { 
    border: 2px solid green; 
} 

.col-md-6 { 
    height: 50px; 
    border: 2px solid red; 
} 

而且，正如其他人所說，山坳填充和利潤的設計與行填充和利潤一起工作。

Answer 2

您應該始終將<div class="col-xs-12"></div>包裝在<div class="row"></div>之內。

原因-1

這是自舉電網系統。我們使用bootstrap來使佈局乾淨和響應。 這樣做不會造成任何傷害。

原因-2

如果你沒有在<div class="row"></div>包裹一旦你的佈局長期的增長會造成在不久的將來不必要的問題。你將無法跟蹤你的佈局。

因此，如果您沒有堅實的理由不這樣做，總的來說，將其包裝在<div class="row"></div>之內是很好的做法。

希望這會有所幫助！

Answer 3

Bootstrap col-*只能在row內使用。來自文檔..

使用行創建水平的列組。

內容應該放在列內，而只有列可能是直接子行。

列通過填充創建裝訂線（列內容之間的間隙）。該填充通過.rows上的負邊距在第一行和最後一列的行中偏移。

另見：Bootstrap 3 Rows and Columns

Answer 4

其實這是不使用外排引導列類標準程序。它可能會擾亂色譜柱設計的佈局。在bootstrap css文件中，每個列類都根據其用途分配了不同的寬度百分比。如果使用行類之外的列類，它可能會形成與引導程序規定的實際佈局不同或受到干擾的佈局。所以這不是一個好的做法。通過w3Schools.com指定

網格系統規則 一些引導網格系統規則

• 行必須放在一個.container（固定寬度）內或.container-fluid（全寬），用於正確對準和填充
• 使用行來創建水平的列組
• 內容應放置在列中，並且只有列可以是行的直接子節點
• 預定義類如.row和.col-sm-4可用於快速製作網格佈局
• 列通過填充創建排水溝（列內容之間的間隙）。通過負邊距對第一列和最後一列的填充進行偏移.rows
• 通過指定您希望跨越的12個可用列的數量來創建網格列。例如，三個相同的列將使用三個.col-sm-4