html - 列之间的边框间距

Question

我在一行中有 3 列，每一列都有 col-xs-4 类，因此它们覆盖了整行。现在我需要为每一列添加 border 并且我不希望它们重叠。

目前，我正在使用 border，但列之间没有间距。我希望这些列的边界之间有一些空间，这样它们看起来就像彼此分开。

我不能使用偏移，因为列开始垂直堆叠。

这能实现吗？

Answer 1

您可以使用填充和子 div

.col-xs-4 {
  padding: 16px;
}
.col-xs-4 > div {
  border: 1px solid black;
  padding: 16px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<row>
  <div class="col-xs-4">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste necessitatibus, sapiente vitae ullam exercitationem debitis quos quod, consequatur nobis cumque aut totam neque provident tempore recusandae vel quis suscipit eum.
    </div>
  </div>
  <div class="col-xs-4">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste necessitatibus, sapiente vitae ullam exercitationem debitis quos quod, consequatur nobis cumque aut totam neque provident tempore recusandae vel quis suscipit eum.
    </div>
  </div>
  <div class="col-xs-4">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste necessitatibus, sapiente vitae ullam exercitationem debitis quos quod, consequatur nobis cumque aut totam neque provident tempore recusandae vel quis suscipit eum.
    </div>
  </div>
</row>