Question

使用twitter bootstrap v3 rc1。

我的页面上有三个.sub-content-block div，带.make-column（4）;适用于每个人。

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

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

在variables.less文件中，装订线宽度设置为30px。

任何关于为什么每个div之间没有间距的说明表示赞赏。

enter image description here

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

注意我会将我的内容包含在一个带有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>

<强>结果

enter image description here

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

1 个答案: