不幸的是,似乎没有一种好的方法来管理在某些断点处从水平堆栈过渡到垂直堆栈的列之间的垂直间距.似乎有一个
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相同.
