Zurb电子邮件模板列宽度均匀分割

Question

我正在使用Zurb（他们的电子邮件模板语言）和sass。关注their guide我有一个非常简单的列设置，我想要实现，三个全宽列堆叠在彼此顶部。问题是，即使将small="12"应用于所有这些，它们也会占用均匀的间距。

<container>
  <row>
    <columns small="12"> test column 1 </columns>
    <columns small="12"> test column 2 </columns>
    <columns small="12"> test column 3 </columns>
  </row>
</container>

Answer 1

虽然你有正确的想法，但不幸的是，列和行的工作方式与你的想法不同 - 你只需不能超过12列。当您指定大于12的组合宽度时，该行将尝试自动将列缩放为总数为12.实际上，使用small="12"的三列与使用small="4"的三列没有区别。

要实现您的目标，您只需添加三个行：

<container>
  <row>
    <columns small="12">test column 1</columns>
  </row>
  <row>
    <columns small="12">test column 2</columns>
  </row>
  <row>
    <columns small="12">test column 3</columns>
  </row>
</container>

希望这有帮助！ ：）