引导程序：在列之间添加边距/填充空间

小编典典

引导程序：在列之间添加边距/填充空间

css

我正在尝试在Bootstrap网格布局的列之间放置一些额外的边距/填充空间。我已经尝试过了，但是我不喜欢这个结果。这是我的代码：

    <div class="row">
        <div class="text-center col-md-6">
            Widget 1
        </div>
        <div class="text-center col-md-6">
            Widget 2
        </div>
    </div>

我要添加margin: 10px和padding:10px。有人建议他们班改为col-md-5用pull-left和pull- right，但它们之间的差距会过大。

阅读 232

2020-05-16

共1个答案

小编典典

更新2018

Bootstrap 4
现在具有[间距实用程序，使添加（或减去）列之间的[间距（装订线）更加容易。
不需要额外的CSS 。

<div class="row">
    <div class="text-center col-md-6">
        <div class="mr-2">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="ml-2">Widget 2</div>
    </div>
</div>

您可以使用 边距工具 来 调整列内容 的 边距， 例如ml-0（margin-left：0），mr-0（margin-
right：0），mx-1（。25rem左右边距）等。

或者， 可以 调整在列填充 用（*同事）填充
utils的如PL-0（填充左：0），PR-0（填充右：0），PX-2（左.50rem＆右填充），等等。

Bootstrap 4列间距演示

笔记

更改左/右页边距col-*将破坏网格。
更改col-*作品内容的左/右页边距。
更改上的左/右填充col-*也可以。

2020-05-16