css - Bootstrap 4优雅的垂直列间隙

This question already has answers here:

Bootstrap: add margin/padding space between columns
                                
                                    （14个回答）
                                
                        
                                2年前关闭。
            
                    
我要实现的是超级简单。我想要几个像素间隙，假设一行中每个列项目之间有10个像素间隙。引导程序当然带有这样简单的内容，但是我似乎在文档中找不到它。

每当我用谷歌搜索类似的东西时，我得到的都是狡猾的骇客和大量的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

最佳答案

作为一种选择-重新格式化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>

关于css - Bootstrap 4优雅的垂直列间隙，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50453454/