html - 带背景的 Bootstrap 列之间的间距

Question

我正在尝试构建如下网格:

但是，因为列使用填充而不是边距，所以当我添加背景颜色时，列最终会接触。

我可以在每一列中添加另一个 div 并在其上设置背景，但我已经不喜欢 Bootstrap 所需的所有添加标记。是否有一种干净的方法可以在不添加十几个额外元素的情况下完成此操作？

编辑:

澄清一下，网格就像一个 col-4、col-8...然后在 col-8 中有 3 个 col-4...

JSFiddle Link
JSFiddle Link w/Wells (不喜欢 bg 的额外标记)

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="well well-sm">Left Top</div>
            <div class="well well-sm">Left Bottom</div>
        </div>
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-4">
                    <div class="well well-sm">Left/Middle</div>
                </div>
                <div class="col-sm-4">
                    <div class="well well-sm">Right/Middle</div>
                </div>
                <div class="col-sm-4">
                    <div class="well well-sm">Right Top</div>
                    <div class="well well-sm">Right Bottom</div>
                </div>
            </div>
            <!--end row-->
        </div>
    </div>
    <!--end row-->
    <div class="row">
        <div class="col-sm-12">Other content...</div>
    </div>
    <!--end row-->
</div>

Answer 1

您必须使用 Bootstrap 发挥创意。如果您想要更简单的方法，我建议使用 panels 或 wells。

<div class="col-md-3">
  <div class="well well-sm">
  Content goes here
   </div>
</div><!--end col-->

Example Here