需要使用twitter bootstrap v3在div之间的间距 [英] need spacing between divs using twitter bootstrap v3

问题描述

使用twitter bootstrap v3 rc1。

Using twitter bootstrap v3 rc1.

我的页面上有三个.sub-content-block div。应用于每个。

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

我已经尝试添加.make-row;到包含所有三个sub-content-block div的div，并且将其设置为.make-column（12），希望在每个div之间有间距。

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.

正如你在截图中可以看到的，每个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.

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

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

任何澄清为什么每个div之间没有间距

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>

推荐答案

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

In the first place i wonder why you use v3 rc1 and not the latest release. Version 3.0.0. don't define .make-column any more. Instead you have to use .make-xs-column, .make-sm.column, etc. depending om the grid you will use.

我使用了版本3.0。 0。以回答您的问题，但答案将是一样的。

I have used Version 3.0.0. to answer your question, but the answer will be the same.

在Bootstrap 3中，通过在列中添加一个填充来构造装订线。在默认情况下，如果使用30px的间距，则在列的左侧和右侧添加一个15px的填充。
你为列添加了一个背景，这个背景也会填充填充空间，所以你看不到槽。 （您仍然会在您的内容周围看到空格）。

In Bootstrap 3 the gutter is construct by adding a padding to the column. In the default case with a gutter of 30px a padding of 15px is add to the left and right of a columns. You add a background to the column, this background also will fill the padding space, so you don't see the gutter. (you still see white space around your content).

为了使天沟可见，您必须将内容封装在额外的容器（div）这。

To make the gutter visible you will have to wrap your content in an extra container (div) and apply a background on this.

少

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

注意我会将我的内容包装在div 里。我也使用：make-md-column，你将使用make-columns。

NOTE i will wrap my content in a div with class inside. I also use: make-md-column where you will use make-columns maybe.

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>

结果

这篇关于需要使用twitter bootstrap v3在div之间的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！