css - 列之间的边距

Question

所以新的 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 已经删除了列边距（现在有左右填充）。如何在 div 上放置背景颜色class="col-lg-4"并在每个 div 之间设置页面背景间隙？

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

Answer 1

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

Answer 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;
}