`p-N` 及其变体在 Bootstrap v4 中代表什么?

问题描述

我发现 Bootstrap v4 中的命名不太直观.

I find the naming in Bootstrap v4 less than intuitive.

我知道他们希望尽量减少所有类对标记的影响，但我无法得出合理的结论.我可以猜测 - 但我找不到具体的答案.

I know they want to minimise the impact all the classes cluttering up the markup, but I just can't come to a reasonable conclusion. I can guess - but I can't find concrete answers.

• p-1、p-2、p-N:与 Flexbox 相关，但 p 代表什么?
• d-flex:与 Flexbox 相关，但是 d 代表什么?也许display?
• mr-auto - Elliot 的堂兄?猜测保证金相关 - 也许 margin-right-auto 但无法在文档中确认.
• mt-auto - ?
• ml-auto - ?

• p-1, p-2, p-N: Flexbox related, but what does the p stand for?
• d-flex: Flexbox related, but what does the d stand for? Perhaps display?
• mr-auto - Elliots cousin? Guessing margin related - perhaps margin-right-auto but can't confirm in the docs.
• mt-auto - ?
• ml-auto - ?

推荐答案

它们是新的 spacing实用程序 类.我认为它们非常直观:

They are the new spacing utility classes. I think they're very intuitive:

• p-* 用于填充所有边.
• m-* 是所有边的边距.
• pl-* 用于向左填充.
• mt-* 用于页边距顶部.
• mr-auto 用于自动边距.

• p-* is for padding all sides.
• m-* is for margin all sides.
• pl-* is for padding left.
• mt-* is for margin top.
• mr-auto is for margin right auto.

间距实用程序演示

还有显示实用程序.

d-block、d-flex、d-inline-block、d-none 等...

这篇关于`p-N` 及其变体在 Bootstrap v4 中代表什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！