css - Zurb Foundation 4 中网格单元之间的间距

Question

有没有一种简单的方法可以在 Zurb Foundation 4 中的网格单元之间设置间距？我不想弄乱 Foundation 元素的 CSS，因为这可能会引发其他问题。他们的Grid 文档中有一个$column-gutterSCSS 变量：

$column-gutter: 1.875em !default;

但是，我不确定这是为了什么，因为列之间的空间似乎为零，而不是 1.875em。我是否希望确保单元格中的所有内容在它们周围都有填充？

Answer 1

尝试使用在foundation.css之后加载的单独样式表，其内容如下所示：

@media only screen {
  .row .columns, .row .column {
    padding-left: 10px; /* change the values to anything that you want */
    padding-right: 10px;
  }
}

我将它放在仅@media 的屏幕中，因为对于打印，您可能不希望它带有额外的填充显示。

这里的例子

如果您想在打印时使用这个额外的填充，您必须使用以下内容：

.row .columns, .row .column {
  padding-left: 10px !important; /* change the values to anything that you want */
  padding-right: 10px !important;
}

您必须使用重要部分，因为默认的foundation.css 中有一个@media only 屏幕，它将覆盖您的值。

编辑

只需为要应用额外填充的列使用另一个单独的类。例子：

.extra-padding {
  padding-left: 10px !important; /* change the values to anything that you want */
  padding-right: 10px !important;
}

这里的例子

Answer 2

您可以添加偏移量

<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>

http://foundation.zurb.com/docs/components/grid.html