1
tl; dr：ブートストラップの水平溝（マイナスマージンとプラスパディング）のようにグリッドシステムに垂直溝を追加すると、clearfixが破損します。列間のブートストラップの追加のような行の間に垂直ガターを追加するにはどうすればよいですか？
楽しい私はブートストラップのようなグリッドシステムを作っています。私は列に行と正パディングへの負のマージンを追加しました：
.row {
margin: -15px 0;
display: block;
}
.row > * {
padding: 15px 0;
float: left;
display: block;
}
.row > *:after {
clear: both;
content: "";
display: table;
}
.row .col-1 { width: 8.333%; }
.row .col-2 { width: 16.666%; }
.row .col-3 { width: 25%; }
// ...
これは、ブートストラップ3のグリッドシステムのような水平方向の雨どいてくれ与えます。それも、適切に巣の行と列に私を可能にする：常にブートストラップのグリッドシステムの行との間隔なしでスタックしていることを私にうんざりだので
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-6">
<label for>Label</label>
<input type="text" class="input error" value="Error" />
</div>
<div class="col-6">
<input type="text" class="input warning" value="Warning" />
</div>
</div>
</div>
</div>
だから次回、縦樋です。 I 各行にmargin-bottomを追加することはできますが、行と列をネストすることはできません。別名まだガターを維持しながら列がラップすることができます（
.row {
margin: -15px -15px; // kept separate in case I want the vertical gutter to be differently sized than the horizontal gutter
display: block;
}
.row > * {
padding: 15px -15px;
float: left;
display: block;
}
そして、これは甘い縦樋を追加し、巣の行に私を可能にしても、12個の以上の列単位を使用します。だから、私は負のマージンと正のパディングを追加しました。 https://jsfiddle.net/8auw0s6k/
しかし
これは、すぐにclearfixが負のマージンで作業されていないため、任意の列は、おそらく他よりも高くなるよう破る：）それは実際にはかなりうまく動作し、高さが同じで提供されます。 https://jsfiddle.net/eajpzeeh/1/
ネスティングを許可している間に垂直溝を持つ方が良いでしょうか？または、clearfixの作業を行う方法はありますか？