html - need spacing between divs using twitter bootstrap v3

Question

Using twitter bootstrap v3 rc1.

I have three .sub-content-block divs on my page, with .make-column(4); applied to each.

I have tried adding .make-row; to a div that contains all three of the sub-content-block divs, and set it to .make-column(12) too, in hopes of having spacing between each div.

As you can see in the screenshot, there is no spacing between each div, if I do not have a background color, it looks like there is some spacing, but thats more so padding than spacing.

The gutter width is set to 30px in the variables.less file.

Any clarification as to why there is no spacing between each div is appreciated.

.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 中，通过向列添加填充来构造排水沟。在默认情况下，间距为 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;
    }
}

注意我会将我的内容包装在一个带有 class 的 div 中inside。我还使用：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>

结果