Zurb 基础网格 - 没有行的重复列答案

【问题标题】：Zurb foundation grid - repeating columns without rowZurb 基础网格 - 没有行的重复列
【发布时间】：2016-05-29 18:18:11
【问题描述】：

这样做有错吗？

<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>

据我所知，结果相同，但divs 更少。

【问题讨论】：

标签： grid zurb-foundation zurb-foundation-5

【解决方案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 是解决这些问题的好方法。

【讨论】：

我要补充一点，两种方式都有效，第二种方式在技术上是 Zurb（以及 Twitter/Bootstrap）在文档中所认可的。如果您更改布局并且列宽不等于 100%，那么整个事情都会中断而不会插入行。
好点。我一直在使用 Foundation 的均衡器，以至于我忘记了浮动问题。我会编辑我的答案

【解决方案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>

这个结构做的一些事情是：

四舍五入的宽度 - 浏览器呈现宽度％不同..so 大多数框架都有一个float :opposite 方向属性 column:last-child 在行中，以便所有行中的最后一列对齐。
行用于清除布局中的浮动。例如：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 列使用新行。

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

【讨论】：