プロジェクトで 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 がグリッド列 mixin にパラメータを追加してくれることを望みます!