我在项目中使用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可以在其网格-列混合中添加一个参数来管理这样的填充！
我希望Foundation可以在其网格-列混合中添加一个参数来管理这样的填充！
grid-column已经拥有collapse财产了。您也可以指定padding-right: 0; padding-left: 0自己，但collapse 会为您做到这一点。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句