问题描述
Bootstrap 4 具有 Spacing Utilities 可以使用简单的 CSS 类调整边距和填充.
Bootstrap 4 has Spacing Utilities to adjust margins and paddings with simple CSS classes.
理论上，我可以这样做:
<div class="d-inline-block bg-inverse p-5 pb-0 m-5 mb-0"></div>
这应该是一个元素，每边除了底部都有内边距和边距.对吗?
And this should be an element with paddings and margins on each side except at the bottom. Right?
但这并没有发生.相反，pb-0 和 mb-0 被 p-5 和 m-5 覆盖，因为你可以在这里看到:JSFiddle 中的示例.
But that isn't happening. Instead, pb-0 and mb-0 are being overwritten by p-5 and m-5, as you can see here:example in JSFiddle.
pb-0 和 mb-0 定义在 p-5 和 m-5 之后原始来源，并且这些类中使用的所有属性都有 !important.所以 pb-0 应该覆盖 p-5 定义的 padding-bottom 并且 mb-0 应该覆盖margin-bottom 由 m-5 定义.
pb-0 and mb-0 are defined after p-5 and m-5 in the original source, and all of the attributes used in these classes have !important. So pb-0 should overwrite the padding-bottom defined by p-5 and mb-0 should overwrite the margin-bottom defined by m-5.
我创建了另一个示例，其中以相同的方式定义了这些类，但在这种情况下，它们按预期工作:JSFiddle 中的比较示例.
I created another example where I defined these classes in the same way, but in this case, they are working as expected: comparison example in JSFiddle.
推荐答案
间距工具使用 !important 所以，使用 pb-0 覆盖 p-5 不会工作，因为 p-5 跟在 bootstrap.css
The spacing utils use !important so, using pb-0 to override p-5 isn't going to work because p-5 follows pb-0 in the bootstrap.css
要获得它按照您想要的方式工作设置特定的边...
To get it working like you want set the specific sides...
<div class="d-inline-block bg-inverse pb-0 px-5 pt-5 mb-0 ml-5 mt-5"></div>
而且，由于默认情况下 DIV 没有填充或边距，因此您实际上并不需要 *-0...
And, since DIV doesn't have padding or margins by default, you don't really need the *-0...
<div class="d-inline-block bg-inverse px-5 pt-5 ml-5 mt-5"></div>
https://www.codeply.com/go/6hSIEizfMd
另请参阅，什么时候可以使用！important
这篇关于Bootstrap 4 间距错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！