Css 如何在行之间添加垂直边沟，就像在列之间添加引导一样？

tl；dr：向我的网格系统添加垂直排水沟，就像bootstrap的水平排水沟（负边距和正填充）会破坏clearfix。

为了好玩，我正在制作一个类似bootstrap的网格系统。我在行中添加了负边距，在列中添加了正填充：

.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>

这增加了一个漂亮的垂直边沟，允许我嵌套行，甚至使用超过12个列单位（也称为允许列在保留边沟的同时进行包裹）。如果高度相同，它实际上工作得很好：

但是

这会在任何列高于另一列时立即中断，可能是因为clearfix没有使用负边距。很明显，许多柱子会有不同的高度：

在允许嵌套的同时，有没有更好的方法来设置垂直排水沟？还是有办法让clearfix工作？

---

简单地添加

clear:class
上的两个
。row
应该足以阻止任何浮点移位。
您正在使网格系统像引导程序一样，但您忘记了引导程序使用的一件事，那就是
clearfix
，您还需要在布局中使用它

如果您使用的是float，那么还需要在行中使用clear来清除该float

工作示例：

.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;
}

.row { margin: -0.5rem -0.5rem; display: block; clear: both; }