ker*_*lin 10 html5 spacing css3 twitter-bootstrap-4 bootstrap-4
不幸的是,似乎没有一种好的方法来管理在某些断点处从水平堆栈过渡到垂直堆栈的列之间的垂直间距.在涉及表单时似乎确实存在解决方案,但这不是这里的情况.我已经尝试过这个解决方案,但是当有多个列连续换行时它不起作用.
为了说明我的场景,这是我的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),该解决方案都可以工作.
Zim*_*Zim 33
使用新的Bootstrap 4 间距实用程序.例如,mb-3添加margin-bottom 1rem.
不需要额外的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问题中解释的解决方案(它 不依赖于使用表单):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.
以下是我最终完成这项工作的方法：
.row [class*="col-"] {
@extend .mb-4;
&:last-child {
@extend .mb-0;
}
@extend .mb-md-5;
&:nth-last-of-type(1),
&:nth-last-of-type(2),
&:nth-last-of-type(3) {
@extend .mb-md-0;
}
}