Css Bootstrap 4优雅的立柱间隙

我想要实现的是超简单的。我想要两个像素间距，比如说一行中每个列项目之间的间距为10。当然，bootstrap附带了这么简单的东西，但我似乎在文档中找不到它

每当我在谷歌上搜索类似的东西时，我得到的只是狡猾的黑客攻击和大量额外的div和class

有没有一种内在的或优雅的方式来实现如此简单的事情

HTML

---

Codpen:

作为选项-重新格式化html并使用引导间距：

<div class="col-md-2 p-0">
  <div class="content mr-2">
     1 of 2
  </div>
</div>
<div class="col-md-10 p-0">
  <div class="content ml-2">
     2 of 2
  </div>
</div>

---

你是说列之间的水平间距吗？列之间已经有了水平填充。您没有看到它的唯一原因是您正在将.content应用于列，而不是将其用作自己的子元素。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.content{
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px;
  background-clip: padding-box;
  margin-bottom: 20px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.06);
 }

<div class="col-md-2 p-0">
  <div class="content mr-2">
     1 of 2
  </div>
</div>
<div class="col-md-10 p-0">
  <div class="content ml-2">
     2 of 2
  </div>
</div>