p-N及其变体在Bootstrap v4中代表什么? [英] What does the `p-N` and its variants represent in 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 -Elliots表弟?猜测保证金相关-也许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中代表什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！