0 
.rounded-box(@border; @radius; @bg-color: transparent; @padding: 5px 10px) {
   border:1px solid @border;
   .border-top-radius(@radius);
   .border-bottom-radius(@radius);
   .border-left-radius(@radius);
   .border-right-radius(@radius);
   background-color: @bg-color;
   padding: @padding;
}

I have a mixin creating a rounded corner box, in the screenshot below, you can see that it does not have any spacing between each div, which has .make-column(4) applied to each.

*I do include the bootstrap.less into my main less file and run lessc to compile and this is in the screen shot you see is over 990px wide. Any help is appreciated.

enter image description here

@rounded-box-radius: 10px;
@rounded-box-border: #ccc;
@rounded-box-height:230px;
@box-bg-color: #eee;

.article {
    .make-column(4);
}

.promo {
    .make-column(4);
    .visible-lg;
    .rounded-box(@rounded-box-border, @rounded-box-radius);
    height: @rounded-box-height;
} // promo end

HTML

<div class="promo">
    Promo
</div>

<div class="article">
    <h3>Blog Entry 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor.</p>

    <div class="date">March 23, 2013</div>
    <div class="read-more"><a href="blog-detail.php" title="read more on this title">Read more</a></div>
</div>

<div class="promo">
    Promo
</div>
4

2 回答 2

2

我认为 bootstrap 3 使用填充来分隔列而不是边距。您的边框环绕整个元素，包括填充。您可能需要为列分隔提供自己的边距规则，而不是使用填充来获得带有分隔的边框框。

于 2013-08-08T13:53:36.123 回答
0

@jtlowe就在 https://stackoverflow.com/a/18127896/1596547关于填充。但是在列上应用边距规则会破坏网格（由于边距与宽度相加）。

使用额外的容器，就像这里一样：需要使用 twitter bootstrap v3 的 div 之间的间距（重复？？）

html

<div class="promo">
    <div class="rounded-box">Promo</div>
</div>

较少的

.rounded-box(@border; @radius; @bg-color: transparent; @margin: 5px 10px) {
   border:1px solid @border;
   .border-top-radius(@radius);
   .border-bottom-radius(@radius);
   .border-left-radius(@radius);
   .border-right-radius(@radius);
   background-color: @bg-color;
   margin: @margin;
   height:@rounded-box-height;
}

注意在这里应用高度（@rounded-box-height）并用边距替换填充

于 2013-09-12T18:29:22.963 回答