Bootstrap 4间距错误? [英] Bootstrap 4 spacing bug?
问题描述
Bootstrap 4具有 Spacing Utilities ，可通过简单的CSS类调整边距和填充
Bootstrap 4 has Spacing Utilities to adjust margins and paddings with simple CSS classes.
理论上，我可以做这样的事情:
Theoretically, I could do something like this:
<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应该覆盖m-5定义的margin-bottom.
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.
我创建了另一个示例，其中我以相同的方式定义了这些类，但是在这种情况下，它们按预期方式工作:
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.
推荐答案
space utils使用!important，因此使用pb-0覆盖p-5无效，因为p-5在pb-0之后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
这篇关于Bootstrap 4间距错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
