Bootstrap 减少列间距答案

【问题标题】：Bootstrap reduce spacing between columnsBootstrap 减少列间距
【发布时间】：2017-03-01 20:37:03
【问题描述】：

在减少同一行中按钮之间的间距时遇到问题。这些按钮被包裹在列中 JSFiddle

有没有简单的方法来做到这一点？我想使用负边距或填充不一定是可取的。

【问题讨论】：

【解决方案1】：

问题似乎在于填充而不是边距。这段css去掉了列之间的空白

   .form-group .col-xs-6{
      padding: 0px;
    }

【讨论】：

绝对填充
啊，确实是填充。谢谢！

【解决方案2】：

在 Bootstrap 4 中，您不需要额外的 CSS。只需使用间距工具 (p-*) 或 no-gutters 类...

<div class="form-group">
    <div class="row no-gutters">
        <div class="col-6">
            <button class="btn btn-block">Test One
                <br>Some More</button>
        </div>
        <div class="col-6">
            <button class="btn btn-block">Test Two
                <br>Some More)</button>
        </div>
    </div>
    <div class="row">
        <div class="col-6 pr-1">
            <button class="btn btn-block">Test Three
                <br>Some More</button>
        </div>
        <div class="col-6 pl-1">
            <button class="btn btn-block">Test Four
                <br>Some More</button>
        </div>
    </div>
</div>

https://www.codeply.com/go/AjLhoAztxt

【讨论】：