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

Posted 2023-03-06

【中文标题】Zurb Foundation 4 中网格单元之间的间距

【英文标题】：Spacing between grid cells in Zurb Foundation 4

【发布时间】：2013-02-20 05:15:21

【问题描述】：

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

$column-gutter: 1.875em !default;

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

【问题讨论】：

你的意思是喜欢填充吗？举个例子会很有帮助。

是填充。如果我在网格单元格中有内容，则内容与两侧齐平

我想知道$column-gutter 的意义是什么，因为我也看不到它有任何效果。我们这里一定漏掉了一个窍门。

【参考方案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 的屏幕中，因为对于打印，您可能不希望它带有额外的填充显示。

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 only 屏幕，它将覆盖您的值。

编辑

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

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

Example of this here

【讨论】：

有道理，我唯一担心的是这是否会以某种方式影响基金会的其他部分？

它不会影响 Foundation 本身，但它可能会更改一些您不想更改的其他布局。查看我编辑的帖子。

【参考方案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

【讨论】：

问题是将现有的装订线修改为差异值，而不是引入额外的列。