Bootstrap 4优雅的垂直列间隙[重复]答案

【问题标题】：Bootstrap 4 elegant vertical column gap [duplicate]Bootstrap 4优雅的垂直列间隙[重复]
【发布时间】：2018-10-31 09:10:23
【问题描述】：

我想要实现的非常简单。我想要几个像素间隙，假设一行中的每个列项目之间有 10 个。 bootstrap 肯定有这么简单的东西，但我似乎在文档中找不到它。

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

是否有内置或优雅的方式来实现如此简单的事情？

HTML

<div class="container">
  <div class="row">
    <div class="col-md-2 content">
      1 of 2
    </div>
    <div class="col-md-10 content">
      2 of 2
    </div>
  </div>
</div>

CSS

.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);
 }

密码笔：https://codepen.io/anon/pen/vjPYJy

【问题讨论】：

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

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

作为一个选项 - 重新格式化您的 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>

【讨论】：