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

Question

Zurb Foundation 4中的网格单元之间是否有简单的间距？我不想搞乱基金会元素的CSS，因为这可能会抛弃其他东西。 Grid docs中有$column-gutter个SCSS变量：

$column-gutter: 1.875em !default;

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

Answer 1

尝试使用一个单独的样式表，该样式表在之后加载基础内容，其中内容如下所示：

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

我把它放在@media only屏幕上，因为对于打印你可能不希望它显示额外的填充。

<强> Example of this here

如果要在打印时使用此额外填充，则必须使用以下内容：

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

您 使用重要部分，因为默认的foundation.css中只有@media屏幕会覆盖您的值。

修改

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

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

<强> Example of this here

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