如何在行之间添加垂直排水沟，如引导程序在列之间添加？答案

【问题标题】：How do I add a vertical gutter between rows like bootstrap adds between columns?如何在行之间添加垂直排水沟，如引导程序在列之间添加？
【发布时间】：2016-04-07 14:38:54
【问题描述】：

tl;dr：向我的网格系统添加垂直排水沟，如引导程序的水平排水沟（负边距和正填充）会破坏 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%; }
// ...

这给了我像 Bootstrap 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>

所以接下来是一个垂直排水沟，因为它总是让我感到厌烦，因为引导程序的网格系统行堆叠没有间距。我可以为每一行添加一个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 工作？

【问题讨论】：

标签： css

【解决方案1】：

好吧，您正在制作类似于 bootstrap 的网格系统，但您忘记了 bootstrap 使用的一件事，即clearfix，您还需要在布局中使用它。

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

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

工作示例：https://jsfiddle.net/eajpzeeh/6/

【讨论】：

【解决方案2】：

DEMO

只需在 .row 类上添加 clear: both 就足以阻止任何浮动位移。

【讨论】：