twitter bootstrap 3.0 rc1 未在某些列之间使用排水沟答案

【问题标题】：twitter bootstrap 3.0 rc1 not using gutters between certain columnstwitter bootstrap 3.0 rc1 未在某些列之间使用排水沟
【发布时间】：2013-08-10 05:55:58
【问题描述】：

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

我有一个 mixin 创建一个圆角框，在下面的屏幕截图中，你可以看到它在每个 div 之间没有任何间距，每个 div 都应用了 .make-column(4)。

*我确实将 bootstrap.less 包含在我的主 less 文件中并运行 lessc 进行编译，这是在您看到的屏幕截图中超过 990 像素宽。任何帮助表示赞赏。

@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>

【问题讨论】：

标签： html css less twitter-bootstrap-3

【解决方案1】：

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

使用额外的容器，就像这里：need spacing between divs using twitter bootstrap v3（重复？？）

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）并用边距替换填充

【讨论】：

【解决方案2】：

我认为 bootstrap 3 使用填充来分隔列而不是边距。您的边框环绕整个元素，包括填充。您可能需要为列分隔提供自己的边距规则，而不是填充，以获取带边框的框，并在它们之间进行分隔。

【讨论】：