Html 具有背景的引导列之间的间距

我正在尝试构建一个网格，如：

但是，由于列使用填充而不是边距，因此当我添加背景色时，列最终会相互接触

我可以在“每个列”中添加另一个div并设置其背景，但我已经不喜欢Bootstrap所需的所有添加的标记。有没有一种干净的方法可以在不添加十几个额外元素的情况下实现这一点

编辑： 为了澄清，网格就像一个col-4，col-8。。。那么第8列中有3列第4列

不喜欢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>

---

你必须用Bootstrap来创造。如果你想要一个更简单的方法，我建议使用面板或井

---

除了表单之外，Bootstrap中的大多数东西都不需要太多额外的标记

演示：

要避免额外的内部元素，可以执行以下操作：

CSS

HTML

---

我认为你的问题没有一个干净的解决办法。我们不得不认为引导网格有助于为我们的内容设置容器，所以我个人认为将方面设置为行/单元格之类的背景是个坏主意。我更喜欢在col-*类中添加一个div

---

无论如何，如果您认为这一点意味着要向html文档添加额外的标记，那么可以为引导行设置新的单元格数量，并使用col offset-*设置单元格之间的比例空间。如果您使用引导导入较少的文件，您可以尝试将@grid columns default:12的值更改为更高的数字，并使用col offset-*类定义单元格之间的空间，正如我前面所说的。如果要导入引导CSS，请尝试重新编译它，并在中更改此变量。

谢谢，但这并不能解决我的问题，因为我必须使用嵌套列在图像中构建网格。请看这里：谢谢，但这正是我担心我必须做的。。。在列中添加div只是为了添加bg颜色。而且，这更符合我试图实现的网格。只是不喜欢所有额外的标记/

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

.mygrid > [class*="col-"]:before{
    content: '';
    position: absolute;
    background: #eee;
    display: block;
    top: 0;
    right: 15px;
    bottom: 0;
    left: 15px;
    z-index: -1;
    border-radius: 5px;
}

.mygrid > [class*="col-"]{
    padding:15px 30px;
    margin-bottom:10px;
}

<div class="container">

  <div class="row mygrid">

    <div class="col-sm-4">
      hello this is the content inside this column
    </div>

    <div class="col-sm-6">
      hello
    </div>

    <div class="col-sm-2">
      hello
    </div>    

  </div>

</div>