在Bootstrap 4中添加垂直堆叠列之间的间距 [英] Add spacing between vertically stacked columns in Bootstrap 4
问题描述
为了说明我的情况，下面是我的HTML结构：
<身体GT;
< 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），解决方案都可以正常工作。
以下是我如何完成这项工作的结果：
.row [class * = col-] {
@extend .mb-4;
&：last-child {
@extend .mb-0;
}
@extend .mb-md-5;
&：第n种类型（1），
&：第n种类型（2），
&：n-last （3）{
@extend .mb-md-0;
}
}
Unfortunately, there doesn't seem to be a good way to manage vertical spacing between columns that transition from a horizontal stack to a vertical stack at certain breakpoints. There does seem to be a solution when a form is involved, but that's not the situation here. I've tried this solution, but it doesn't work when there are multiple columns that wrap in a row.
To illustrate my scenario, here's the structure of my 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/
At medium-device size (md) and above, I'd like there there to be spacing between the two "rows" of columns, but no spacing above the "first row" of 3 columns and none below the "second row" of 3 columns. When the columns stack vertically at below the medium-device size (md), I'd like there to be spacing between each of the columns, but none above the first child and none below the last child.
Ideally, the solution would work regardless of how many columns (e.g., 3, 5, 6, 12) are contained within the row.
Here's how I ended up making this work:
.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;
}
}
这篇关于在Bootstrap 4中添加垂直堆叠列之间的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
