使用 twitter bootstrap v3 需要 div 之间的间距

Question

使用 twitter bootstrap v3 rc1。

我的页面上有三个 .sub-content-block div，带有 .make-column(4);应用于每个。

我已经尝试添加 .make-row;到一个包含所有三个子内容块 div 的 div，并将其也设置为 .make-column(12)，希望每个 div 之间有间距。

正如你在屏幕截图中看到的，每个 div 之间没有间距，如果我没有背景颜色，看起来好像有一些间距，但那更像是填充而不是间距。

gutter 宽度在 variables.less 文件中设置为 30px。

感谢任何关于为什么每个 div 之间没有间距的说明。

.sub-content-block {
    .make-column(4);

    background: @box-bg-color;

    a {
        color: #fff;
        text-decoration: none;
    }

    a:link {
        color:#fff;
        padding:5px;
        background: @block-link-hover;
    }

    a:hover {
        background: #000;
    }
}

<div class="sub-content-block">
    <h4>Get Fast Quote</h4>
    <p>Get a fast quote, or schedule an on-site estimate.</p>
    <p><a href="">Learn More</a></p>
</div>
<div class="sub-content-block">
    <h4>Get Fast Quote</h4>
    <p>Get a fast quote, or schedule an on-site estimate.</p>
    <p><a href="">Learn More</a></p>
</div>
<div class="sub-content-block">
    <h4>Get Fast Quote</h4>
    <p>Get a fast quote, or schedule an on-site estimate.</p>
    <p><a href="">Learn More</a></p>
</div>

Answer 1

首先，我想知道您为什么使用 v3 rc1 而不是最新版本。版本 3.0.0。不要再定义 .make-column 了。相反，您必须使用 .make-xs-column、.make-sm.column 等，具体取决于您将使用的网格。

我使用的是 3.0.0 版。回答你的问题，但答案是一样的。

在 Bootstrap 3 中，gutter 是通过向列添加填充来构造的。在默认情况下，间距为 30px 的情况下，将在列的左侧和右侧添加 15px 的填充。 您向列添加背景，此背景也会填充填充空间，因此您看不到装订线。 （您仍然会在内容周围看到空白）。

要使装订线可见，您必须将内容包装在一个额外的容器 (div) 中并在其上应用背景。

少

.sub-content-block {
    .make-md-column(4);

    background: red;

    a {
        color: #fff;
        text-decoration: none;
    }

    a:link {
        color:#fff;
        padding:5px;
        background: green;
    }

    a:hover {
        background: #000;
    }
    .inside {
    background-color: white;
    }
}

注意我会将我的内容包装在一个带有inside 类的 div 中。我也使用：make-md-column，你可能会使用 make-columns。

html：

<div class="container">    
 <div class="sub-content-block">
    <div class="inside">
    <h4>Get Fast Quote</h4>
    <p>Get a fast quote, or schedule an on-site estimate.</p>
    <p><a href="">Learn More</a></p>
    </div>
</div>
<div class="sub-content-block">
    <div class="inside">
    <h4>Get Fast Quote</h4>
    <p>Get a fast quote, or schedule an on-site estimate.</p>
    <p><a href="">Learn More</a></p>
    </div>
</div>
<div class="sub-content-block">
    <div class="inside">
    <h4>Get Fast Quote</h4>
    <p>Get a fast quote, or schedule an on-site estimate.</p>
    <p><a href="">Learn More</a></p>
    </div>
</div>
</div>

结果