1

我在我的项目中使用 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在第一列添加 a 并做.first-class { padding-left: 0 !important; }，这是我找到的最常见的答案，但它似乎不是很语义......

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

4

1 回答 1

4

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

grid-column已经collapse有财产了。您也可以只指定padding-right: 0; padding-left: 0自己，但collapse 会为您执行此操作。

于 2013-09-25T12:22:06.090 回答