【问题标题】: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;
    }
    

    【讨论】: