列之间的边距答案

【问题标题】：Margins between columns列之间的边距
【发布时间】：2013-09-05 22:23:32
【问题描述】：

所以新的 Bootstrap v3 代码如下所示：

<div class="row">
    <div class="col-md-4 bg-red">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
    <div class="col-md-4 bg-green">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
    <div class="col-md-4 bg-blue">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
</div>

因为 Bootstrap 3 已删除列边距（现在有左右填充）。如何在class="col-lg-4" div 上添加背景颜色并在每个 div 之间设置页面背景间隙？

注意：它必须是class="col-lg-4" div 上的背景色。

【问题讨论】：

对于这个特定的例子，它应该是可能的..但是对于整个 Bootstrap 以及你所要求的这些要求..不值得..使用 BS2 或将内容放入包装器中..

标签： css twitter-bootstrap margin twitter-bootstrap-3

【解决方案1】：

一种方法是使用带有content-box 值的background-clip 属性，以便将绘画区域裁剪到.col-lg-4 的内容框，而不是默认情况下的边框框。

【讨论】：

【解决方案2】：

使用.col-*-3 并为其添加边距。您有 4 列，但第 4 列未使用，然后您有空间留出边距。这是一个例子：

http://www.bootply.com/R9iSDcNuzY

HTML

<div class="row">
    <div class="col-md-3 bg-danger col-margin">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
    <div class="col-md-3 bg-success col-margin">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
    <div class="col-md-3 bg-primary col-margin">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
</div>

CSS

/* CSS used here will be applied after bootstrap.css */
.col-margin{
    margin: 10px;
}

【讨论】：