Zurb基礎網格 - 重複無​​列的列

Question

這樣做是錯誤的嗎？

<div class="row"> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
</div> 

相反的：

<div class="row"> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
</div> 
<div class="row"> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
</div> 
<div class="row"> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
</div> 

從我所看到的結果是相同的，但用更少的div秒。

Answer 1

兩種方式都是正確的。添加.row是非常有用的，因爲它可以保持一致並清除以前的浮點數。藉此例如在小斷點它切換的div至50％（假定12列網格）：

<div class="row"> 
    <div class="small-6 medium-4 columns">some content</div> 
    <div class="small-6 medium-4 columns">some content</div> 
    <div class="small-6 medium-4 columns">some content</div> 
</div> 
<div class="row"> 
    <div class="small-6 medium-4 columns">some content</div> 
    <div class="small-6 medium-4 columns">some content</div> 
    <div class="small-6 medium-4 columns">some content</div> 
</div> 

在上述示例中，當它運行成小的網格將是2，1,2和1.現在有一行做到這一點：

<div class="row"> 
    <div class="small-6 medium-4 columns">some content</div> 
    <div class="small-6 medium-4 columns">some content</div> 
    <div class="small-6 medium-4 columns">some content</div> 
    <div class="small-6 medium-4 columns">some content</div> 
    <div class="small-6 medium-4 columns">some content</div> 
    <div class="small-6 medium-4 columns">some content</div> 
</div> 

這個例子現在將分解爲2,2和2。如果您遇到第二個例子浮動的問題，Foundation's Equalizer是一個偉大的方式解決這些問題。

Answer 2

<div class="row"> 
    <div class="small-12 medium-4 columns">some content</div> 
    <div class="small-12 medium-4 columns">some content</div> 
    <div class="small-12 medium-4 columns">some content</div> 
</div> 

有幾件事情這樣的結構確實是：

1. 一輪關閉寬度 - 瀏覽器渲染寬度％differently..so 大多數的框架有一個float :opposite方向屬性 column:last-child行，這樣在所有行中的最後一列排列在一行中。
2. 行用來在佈局以清除浮.. 例：Link

在上述對準鏈路

是因爲不相等的高度中的列混亂。

<div class="row"> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
    <div class="medium-6 columns">some content</div> 
</div> 

使用這種結構沒有任何錯誤。

有佈局，其中你不能用其他答案中給出的每12列新行。

如果遇到對齊問題，就像我在上面發佈的問題（這是兩個結構之間唯一的主要區別）。有自定義類來清除它們。