Zurb 电子邮件模板列宽被平均分割

Question

我将 Zurb 与 inky（他们的电子邮件模板语言）和 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>

希望对您有所帮助！ :)

Zurb 电子邮件模板列宽被平均分割

Zurb email template columns widths are being split evenly

html

zurb-foundation

inky