Question

有没有人知道是否有设置将列阴沟仅放在一边？目前它在色谱柱的每一侧增加了一半，因此，例如，如果您想要一个14px色谱柱装订线，则每侧会增加7个像素。这会导致一行中的第一列具有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文件的填充右边添加$ 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;
}

更改Zurb Foundation网格列，以便仅在一侧填充

3 个答案: