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已经删除了列边距（现在左边和右边都有填充）。如何在class="col-lg-4" div上添加背景颜色并在每个div之间留下页面背景间隙？

注意：它必须是class="col-lg-4" div。

上的背景颜色

Answer 1

一种方法是使用带有content-box值的background-clip属性，以便将绘制区域剪切到.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;
}

列之间的边距

2 个答案: