Html 在 Bootstrap 4 中添加垂直堆叠列之间的间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43208183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add spacing between vertically stacked columns in Bootstrap 4
提问by keruilin
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:
为了说明我的场景，这是我的 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/
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.
在中等设备大小 (md) 及以上时，我希望两列“行”之间有间距，但在 3 列的“第一行”上方没有间距，在 3 列的“第二行”下方没有间距3 列。当列垂直堆叠在中等设备大小 (md) 以下时，我希望每一列之间都有间距，但第一个子项上方没有间距，最后一个子项下方没有间距。
Ideally, the solution would work regardless of how many columns (e.g., 3, 5, 6, 12) are contained within the row.
理想情况下，无论行中包含多少列（例如，3、5、6、12），该解决方案都将起作用。
采纳答案by keruilin
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;
}
}
回答by Zim
Use the new Bootstrap 4 spacing utilities. For example mb-3adds margin-bottom of 1rem.
No extra CSS is needed.
使用新的 Bootstrap 4间距实用程序。例如mb-3添加 .margin-bottom 1rem。
不需要额外的 CSS。
http://www.codeply.com/go/ECnbgvs9Ez
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>
The spacing utils are responsive so you can apply them for specific breakpoints (ie; mb-0 mb-md-3)
间距实用程序具有响应性，因此您可以将它们应用于特定断点（即; mb-0 mb-md-3）
If you want a CSS solution, use the solution explainedin the related 3.x question (it's notdependent on using a form): https://jsfiddle.net/zdLy6jb1/2/
如果您需要CSS 解决方案，请使用相关 3.x 问题中解释的解决方案（ 不依赖于使用表单）：https: //jsfiddle.net/zdLy6jb1/2/
/* css only solution */
[class*="col-"]:not(:last-child){
margin-bottom: 15px;
}
Note: the col-lg-4is extraneous in your markup since col-lg-4 col-md-4,
is the same as col-md-4.
注意： 与col-lg-4您的标记无关，因为col-lg-4 col-md-4,
与col-md-4.
回答by Mihai T
see snippet below or jsfiddle
请参阅下面的代码段或jsfiddle
it will work regardless how many cols you have or rows
无论您有多少列或行，它都可以工作
first ( on big screen ) all rows have margin-bottomexcept the last one
then on medium screen , the rows won't have any margin and the cols will all have margin-bottom except the last colfrom the last row
首先（在大屏幕上）margin-bottom除了最后一行之外，所有行都有，然后在中等屏幕上，行将没有任何边距，除了最后一行的最后一行之外，列都将有边距底部
.row {
margin-bottom:30px;
}
.row:last-child{
margin-bottom:0;
}
.row [class*="col-"] {
border:1px solid red;
}
@media only screen and (max-width: 768px) {
.row {
margin:0
}
.row [class*="col-"] {
margin-bottom:30px;
}
.row:last-child [class*="col-"]:last-child{
margin-bottom:0;
}
}<body>
<h1 class="display-3">
hey
</h1>
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-4">
col 1
</div>
<div class="col-md-4 col-lg-4">
col 2
</div>
<div class="col-md-4 col-lg-4">
col 3
</div>
</div>
<div class="row">
<div class="col-md-4 col-lg-4">
col 4
</div>
<div class="col-md-4 col-lg-4">
col 5
</div>
<div class="col-md-4 col-lg-4">
col 6
</div>
</div>
</div>
</body>回答by user1263663
I ended up with this solution:
我最终得到了这个解决方案：
@include media-breakpoint-down(xs) {
[class*="col-sm"]:not(:last-child){
margin-bottom: 15px;
}
}
@include media-breakpoint-down(sm) {
[class*="col-md"]:not(:last-child){
margin-bottom: 15px;
}
}
@include media-breakpoint-down(md) {
[class*="col-lg"]:not(:last-child){
margin-bottom: 15px;
}
}
