Zurb Foundation 4 - 第一列和最后一列没有填充

Question

我在我的项目中使用 Foundation 4 和 Sass。我遇到了柱子的排水沟问题。我的问题是列在左侧和右侧都有填充，除非列跨越整个宽度。

因此，如果我有一个元素跨越整个宽度（12 列）的行，它没有填充，它的宽度是 100%。但是如果我有另一行有几列，那么第一行和最后一行会被排水沟缩进，所以它们不会与上面的元素对齐。

一个例子：

HTML

<div class="row">
    <div class="widget">
        Some contents here
    </div>
</div>
<div class="row">
    <aside>Left aside, first column</aside>
    <section>Right section, last column</section>
</div>

CSS

.widget {
    /*Spans the 12 columns*/
    @include grid-column($total-columns); 
}
aside {
    @include grid-column(3);
}
section {
    @include grid-column(9, true);
}

所以你看，widget 将没有填充，并且将大于 aside + section。

我在 Bootstrap 中读到的第一列和最后一列没有填充，我想做类似的事情。我尝试在父行上使用“折叠”，但它似乎没有做任何事情，填充仍然存在。

我知道我可以在第一列添加.first-class 并执行.first-class { padding-left: 0 !important; }，这是我找到的最常见的答案，但它似乎不太语义......

我希望 Foundation 会在他们的 grid-column mixin 中添加一个参数来管理这样的填充！

Answer 1

我希望 Foundation 会在他们的 grid-column mixin 中添加一个参数来管理这样的填充！

grid-column already has a collapseproperty。你也可以自己指定padding-right: 0; padding-left: 0，但是collapsewill do that for you。