Html 在 Bootstrap 4 中的列之间添加空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48834064/
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
Adding space between columns in Bootstrap 4
提问by sev
How I want it to look like:
我希望它看起来像：
I'm trying to add horizontal and vertical space between the columns in BS4 but it keeps either messing breakpoints around (black or red) or the breakpoints of bootstrap. Is there any easy way to add space? I've tried the new margin settings of BS4, but it didn't really help (messed up the heading and background-color). Also, the 2 horizontal columns should have the same height.
我正在尝试在 BS4 中的列之间添加水平和垂直空间，但它会保持混乱的断点（黑色或红色）或引导程序的断点。有没有简单的方法来增加空间？我已经尝试了 BS4 的新边距设置，但它并没有真正帮助（弄乱了标题和背景颜色）。此外，2 个水平列应具有相同的高度。
btw. If you run the snippet, the columns don't display correctly because of the size of the snippet output. That's what it should look like on non-mobile: screenshot(or expand the snippet)
顺便提一句。如果您运行代码段，由于代码段输出的大小，列将无法正确显示。这就是它在非移动设备上的样子：屏幕截图（或展开片段）
* {
color: white;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
nav {
background-color: antiquewhite;
margin: 0px;
}
.row {}
.head {
background-color: aqua;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >
<nav class="navbar-static-top">
Nav
</nav>
<div class="container-fluid">
<div class="row p-1">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 0 COLUMN
</div>
</div>
<p>aaaa<br>
aaaa</p>
</div>
</div>
<div class="row row-eq-height p-1">
<div class="col-md-6 black">
<div class="row">
<div class="col head">
HEADING 1 COLUMNS BLACK
</div>
</div>bbbb<br>
bbbb<br>
</div>
<div class="col-md-6 red">
<div class="row">
<div class="col head">
HEADING 2 CLOUMNS RED
</div>
</div>cccc
</div>
</div>
<div class="row p-1">
<div class="col black">
dddd
</div>
</div>
<div class="row p-1">
<div class="col black">
eeee
</div>
</div>
<div class="row row-eq-height p-1">
<div class="col-md-6 black">
<div class="row">
<div class="col head">
HEADING 3 COLUMNS BLACK
</div>
</div>ffff<br>
ffff<br>
</div>
<div class="col-md-6 red">
<div class="row">
<div class="col head">
HEADING 4 CLOUMNS RED
</div>
</div>hhhh
</div>
</div>
</div>回答by WebDevBooster
For spacing Bootstrap 4 has responsive spacing classes p-*(for padding) and m-*(for margins).
对于间距 Bootstrap 4 具有响应间距类p-*（用于填充）和m-*（用于边距）。
So, in your case, you could experiment by adding p-1or maybe p-2to all your columns to achieve the desired effect.
因此，在您的情况下，您可以通过添加p-1或添加p-2到所有列来进行试验，以达到所需的效果。
Note: The Bootstrap spacing classes are based on remunits, not on pxbecause pxis the old and outdated way of doing things when it comes to responsive design and accessibility.
注意：Bootstrap 间距类基于rem单位，而不是基于单位，px因为px在响应式设计和可访问性方面，这是旧的和过时的做事方式。
Here's the reference link for you:
这是您的参考链接：
https://getbootstrap.com/docs/4.0/utilities/spacing/
https://getbootstrap.com/docs/4.0/utilities/spacing/
The following code snippet produces the desired result by using nesting as well as the m-1class to create margins around the columns:
以下代码片段通过使用嵌套以及m-1类在列周围创建边距来产生所需的结果：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
* {
color: white;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
nav {
background-color: antiquewhite;
margin: 0px;
}
.head {
background-color: aqua;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 0 COLUMN
</div>
</div>
<p>aaaa<br>
aaaa</p>
</div>
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 1 COLUMNS BLACK
</div>
</div>
bbbb<br>
bbbb<br>
</div>
</div>
</div>
<div class="col-12 col-md m-1">
<div class="row h-100">
<div class="col red">
<div class="row">
<div class="col head">
HEADING 2 CLOUMNS RED
</div>
</div>cccc
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
dddd
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
eeee
</div>
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 3 COLUMNS BLACK
</div>
</div>
ffff<br>
ffff<br>
</div>
</div>
</div>
<div class="col-12 col-md m-1">
<div class="row h-100">
<div class="col red">
<div class="row">
<div class="col head">
HEADING 4 CLOUMNS RED
</div>
</div>hhhh
</div>
</div>
</div>
</div>
</div>