不幸的是，似乎没有一种好的方法来管理在某些断点处从水平堆栈过渡到垂直堆栈的列之间的垂直间距。似乎确实有一个 solution when a form is involved ，但这不是这里的情况。我有 tried this solution ，但当有多列换行时，它不起作用。
为了说明我的场景，这里是我的 HTML 的结构:
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
col 1
</div>
<div class="col-md-4">
col 2
</div>
<div class="col-md-4">
col 3
</div>
<div class="col-md-4">
col 4
</div>
<div class="col-md-4">
col 5
</div>
<div class="col-md-4">
col 6
</div>
</div>
</div>
</body>
https://jsfiddle.net/b74a3kbs/6/
在中等设备大小 (md) 及以上，我希望两“行”列之间有间距，但在 3 列的“第一行”上方没有间距，在“第二行”下方没有间距行”的 3 列。当列在中等设备尺寸 (md) 以下垂直堆叠时，我希望每列之间有间距，但没有在第一个子项之上，也没有在最后一个子项之下。
理想情况下，无论该行中包含多少列(例如 3、5、6、12)，该解决方案都有效。
最佳答案
使用新的 Bootstrap 4 spacing utilities。例如 mb-3 添加了 1rem 的 margin-bottom。
不需要额外的 CSS。
http://www.codeply.com/go/ECnbgvs9Ez
<div class="container">
<div class="row">
<div class="col-md-4 mb-3">
col 1
</div>
<div class="col-md-4 mb-3">
col 2
</div>
<div class="col-md-4 mb-3">
col 3
</div>
<div class="col-md-4 mb-3">
col 4
</div>
<div class="col-md-4 mb-3">
col 5
</div>
<div class="col-md-4">
col 6
</div>
</div>
</div>
间距实用程序是响应式的，因此您可以将它们应用于特定的断点(即；mb-0 mb-md-3)
如果您想要一个 CSS 解决方案，请使用相关 3.x 问题中的 solution explained(它是 不依赖于使用表单):https://jsfiddle.net/zdLy6jb1/2/
/* css only solution */
[class*="col-"]:not(:last-child){
margin-bottom: 15px;
}
注意:col-lg-4 在您的标记中是无关紧要的，因为 col-lg-4 col-md-4，
与col-md-4.
关于html - 在 Bootstrap 4 中垂直堆叠的列之间添加间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43208183/