引导减少列之间的间距

Question

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

有一种简单的方法吗？我想使用负边距或填充不一定是可取的。

Answer 1

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

glht

Answer 2

在 Bootstrap 4 中，您不需要额外的CSS 。只需使用spacespace utils（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