Bootstrap 3 - 减少装订线大小[重复]答案

【问题标题】：Bootstrap 3 - reducing gutter size [duplicate]Bootstrap 3 - 减少装订线大小[重复]
【发布时间】：2015-12-10 17:55:38
【问题描述】：

我想要实现的是：

虽然到目前为止看起来像这样（底部边距不是问题，但我决定它们应该更小）：

不幸的是，装订线大小是基于在图像中标记为灰色部分的填充。我希望每个部分都具有相同的大小：15 px。

我所指的代码部分是（其中 groups-margin 为每个按钮设置底部边距）：

<div class="row">
                <div class="col-sm-6 groups-margin">
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 1 <span class="group-stations-count">Stacje: 3</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 2 <span class="group-stations-count">Stacje: 1</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 3 <span class="group-stations-count">Stacje: 3</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 4 <span class="group-stations-count">Stacje: 6</span></a>
                </div>
                <div class="col-sm-6 groups-margin">
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 5 <span class="group-stations-count">Stacje: 4</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 6 <span class="group-stations-count">Stacje: 6</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 7 <span class="group-stations-count">Stacje: 7</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 8 <span class="group-stations-count">Stacje: 2</span></a>
                </div>
            </div>

【问题讨论】：

请在您的问题中发布您的代码。
请包含您用于生成输出的代码。
哎呀，当然，我已经完全忘记了最重要的部分......
这个问题之前有人问过：stackoverflow.com/questions/19164377/…

标签： html css twitter-bootstrap gutter

【解决方案1】：

用 div 包裹你的 col-sm-6，比如 .input-row：

<div class="row">
    <div class="input-row">
                <div class="col-sm-6 groups-margin">
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 1 <span class="group-stations-count">Stacje: 3</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 2 <span class="group-stations-count">Stacje: 1</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 3 <span class="group-stations-count">Stacje: 3</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 4 <span class="group-stations-count">Stacje: 6</span></a>
                </div>
                <div class="col-sm-6 groups-margin">
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 5 <span class="group-stations-count">Stacje: 4</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 6 <span class="group-stations-count">Stacje: 6</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 7 <span class="group-stations-count">Stacje: 7</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 8 <span class="group-stations-count">Stacje: 2</span></a>
                </div>
    </div>
</div>

既然您使用的是col-sm-，请在媒体查询中添加这些属性，如下所示：

@media (min-width: 768px){
    .input-row .col-sm-6:first-child{padding-right:7.5px;}
    .input-row .col-sm-6:last-child{padding-left:7.5px;}
}

现在所有的排水沟（左、右和中间都是 15px）

这是一个带有上述代码的 jsfiddle：http://jsfiddle.net/AndrewL32/65sf2f66/47/

【讨论】：

非常感谢！这解决了我的问题:)
很高兴我能帮助 Jakub :)

【解决方案2】：

我喜欢创建更具体的行类，而保留 Bootstrap 的完整。所以我可能有这样的事情：

.row-half-gutter {
  margin-right: (@grid-gutter-width / 2) * -1;
  margin-left: (@grid-gutter-width / 2) * -1;

  > [class*="col-"] {
    padding-right: (@grid-gutter-width / 4);
    padding-left: (@grid-gutter-width / 4);
  }
}

.row-no-gutter {
  margin-right: 0;
  margin-left: 0;

  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

【讨论】：

【解决方案3】：

如果你想只增加那个部分的装订线大小，你可以为它创建一个类。

.btn .gutter{
   margin-bottom: 5px;
}

你可以在类中添加排水沟

    <a class="btn btn-primary btn-md gutter">some button</a>

【讨论】：