列

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>

Answer 2

我通过减少col-xs-4的宽度并添加了边框来修复此问题。