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

Question

是否有一种简单的方法在Zurb Foundation 4中的网格单元之间有间距？我不想搞乱基金会元素的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 only屏幕上,因为对于打印你可能不希望它显示额外的填充.

这里的例子

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

.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;
}

这里的例子