css - 更改 Zurb Foundation 网格列，使填充仅在一侧

Question

有谁知道是否有设置将柱槽仅放在一侧？目前它在列的每一侧添加一半，例如，如果您想要一个 14px 的列装订线，它将在每一侧添加 7px。这会导致一行中的第一列有一个 7px 的缩进。

我可以用额外的 CSS 破解它，但如果可以的话，我更愿意在默认设置中更改它。

Answer 1

据我所知，如果不创建自己的 mixin 或修改现有的 grid-column mixin，这是不可能的，对于这样的简单案例，这不是你想做的事情。

我建议为此创建自己的类，例如：

SASS

.left-collapse {
  .columns {
    padding-left: 0;
    padding-right: $column-gutter;
  }
}

然后只需将该类添加到您的父行，几乎就像您想要使用折叠类来删除所有装订线宽度一样 - 所以您的行看起来像这样：

<div class="row left-collapse">
   <div class="large-4 columns">FOO</div>
   <div class="large-4 columns">FOO</div>
   <div class="large-4 columns">FOO</div>
</div>

如果您不使用 SASS，那么只需在 CSS 文件的 padding-right 中添加您的 $column-gutter 大小（v4 中的默认值：1.875em）。

Answer 2

对于每一侧的均匀排水沟，您可以对其进行硬编码：

.collapse-half {
  .columns {
    padding-left: .46875rem;
    padding-right: .46875rem;
  }
}

Answer 3

我在 Foundation Docs 6 网站上注意到，它们包括一个.row .row类。这为块网格示例添加了负边距：

.row .row {
  margin-left: -0.9375rem;
  margin-right: -0.9375rem;
}

一种解决方案是遵循.row row选择器中建立的模式并添加

.left-collapse {
  .margin-left: -$column-gutter;
}