html - Zurb 电子邮件模板列的宽度被平均分割

Question

我正在使用带有 inky（他们的电子邮件模板语言）和 sass 的 Zurb。按照他们的指南，我有一个非常简单的列设置，我正在尝试实现，三个全宽列堆叠在彼此的顶部。问题是，即使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。本质上，具有 3 列与具有 3 列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>

希望这可以帮助！:)