Question

我想要实现的是超级简单。我想要几个像素间隙，让我们说连续每个列项之间的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);
 }

Codpen：https://codepen.io/anon/pen/vjPYJy

Answer 1

作为一个选项 - 重新格式化你的html并使用bootstrap间距：

<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>

Bootstrap 4优雅的垂直柱间隙

1 个答案: