What does the `p-N` and its variants represent in Bootstrap v4?

佐手、 提交于 2019-12-04 08:56:30

问题


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 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 - ?

回答1:


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

  • 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.

Spacing Utils Demo

There are also display utilties..

d-block, d-flex, d-inline-block, d-none etc..



来源:https://stackoverflow.com/questions/42160532/what-does-the-p-n-and-its-variants-represent-in-bootstrap-v4

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!