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列新行。

如果遇到对齐问题，就像我在上面发布的问题（这是两个结构之间唯一的主要区别）。有自定义类来清除它们。