Bootstrap 4 间距错误？答案

【问题标题】：Bootstrap 4 spacing bug?Bootstrap 4 间距错误？
【发布时间】：2017-10-16 22:59:54
【问题描述】：

Bootstrap 4 有 Spacing Utilities 可以使用简单的 CSS 类调整边距和填充。

理论上，我可以这样做：

<div class="d-inline-block bg-inverse p-5 pb-0 m-5 mb-0"></div>

这应该是一个在每一边除了底部都有填充和边距的元素。对吧？

但这并没有发生。相反，pb-0 和 mb-0 被 p-5 和 m-5 覆盖，如您在此处看到的： example in JSFiddle.

pb-0 和 mb-0 在原始源中定义在 p-5 和 m-5 之后，并且这些类中使用的所有属性都有 !important。所以pb-0应该覆盖p-5定义的padding-bottom，mb-0应该覆盖m-5定义的margin-bottom。

我创建了另一个示例，其中我以相同的方式定义了这些类，但在这种情况下，它们按预期工作：comparison example in JSFiddle。

【问题讨论】：

【解决方案1】：

间距工具使用!important，因此，使用pb-0 覆盖p-5 是行不通的，因为p-5 在pb-0 中跟随pb-0

要得到它working like you want 设置特定边...

<div class="d-inline-block bg-inverse pb-0 px-5 pt-5 mb-0 ml-5 mt-5"></div>

而且，由于默认情况下 DIV 没有填充或边距，因此您实际上并不需要 *-0...

<div class="d-inline-block bg-inverse px-5 pt-5 ml-5 mt-5"></div>

【讨论】：

Browsers 在_spacing.scss 第 12 行表示 p-5，在 _spacing.scss 第 15 行表示pb-0。但是在查看引导文件后，-0 类首先在@each 在_sizing.scss 中循环。所以是的，正如你所说，p-5 是在pb-0 之后定义的。但这对我来说似乎有些问题，我找不到需要特定侧边距被一般填充覆盖的情况。我解决了它在_variables.scss 中重新排列$spacers 数组。谢谢！
是的，这适用于您的情况，但其他人可能想要相反的情况。例如，假设您要将填充归零，然后将其添加回一侧，例如：<div class="d-inline-block bg-info ml-5 p-0 pt-5">Text</div>。目前在 BS4 中这是可行的，但如果您更改课程的顺序，它将无法正常工作，
是的......这是真的。我本来打算在 GitHub 上提出一个提案，但是现在通过您的示例，我发现没有理想的解决方案。
感谢您的洞察力和好问题！