Bootstrap 4中的class ="mb-0"是什么？

Question

在最新的机制的文档有:

<p class="mb-0">Lorem ipsum</p>

问:什么是mb-0？

Answer 1

Bootstrap具有广泛的响应边距和填充实用程序类.它们适用于所有断点:

xs(<= 576px),sm(> = 576px),md(> = 768px),lg(> = 992px)或xl(> = 1200px))

这些类的格式如下:

{property} {sides} - {size}代表xs&{property} {sides} - {breakpoint} - {size}代表sm,md,lg和xl.

m - 设定保证金

p - 设置填充

t - 设置margin-top或padding-top

b - 设置margin-bottom或padding-bottom

l - 设置margin-left或padding-left

r - 设置margin-right或padding-right

x - 设置padding-left和padding-right或margin-left和margin-right

y - 设置padding-top和padding-bottom或margin-top和margin-bottom

空白 - 在元素的所有4个边上设置边距或填充

0 - 将边距或填充设置为0

1 - 将边距或填充设置为.25rem(如果font-size为16px则为4px)

2 - 将边距或填充设置为.5rem(如果font-size为16px则为8px)

3 - 将边距或填充设置为1rem(如果字体大小为16px,则为16px)

4 - 将边距或填充设置为1.5rem(如果字体大小为16px则为24px)

5 - 将边距或填充设置为3rem(如果font-size为16px则为48px)

自动 - 将保证金设置为自动

在w3schools阅读更多内容

Answer 2

它用于创建0(margin-bottom:0)的底部边距.您可以在此处查看更多新的间距实用程序类:https://getbootstrap.com/docs/4.0/utilities/spacing/

相关:如何在Bootstrap 4上使用Spacing Utility类

Answer 3

m - 对于设置边距的类，如下所示：

• mt - 对于设置的类 margin-top
• mb - 对于设置的类 margin-bottom
• ml - 对于设置的类 margin-left
• mr - 对于设置的类 margin-right
• mx- 对于同时设置margin-left和的类margin-right
• my- 对于同时设置margin-top和的类margin-bottom

其中 size 是 margin 之一：

• 0 - 对于通过将边距设置为 0 来消除边距的类，例如 mt-0
• 1 -（默认情况下）对于将边距设置为 $spacer * .25 的类，例如 mt-1
• 2 -（默认情况下）对于将边距设置为 $spacer * .5 的类，例如 mt-2
• 3 -（默认情况下）对于将边距设置为 $spacer 的类，例如 mt-3
• 4 -（默认情况下）对于将边距设置为 $spacer * 1.5 的类，例如 mt-4
• 5 -（默认情况下）对于将边距设置为 $spacer * 3 的类，例如 mt-5
• auto - 对于将边距设置为自动的类，例如 mx-auto

Answer 4

Bootstrap 具有我们用于样式化的预定义类。如果你熟悉CSS，你就会知道什么是padding、margin和spacing等。

mb-0 = 边距底部:0;

好的，现在进一步了解一下，bootstrap 有更多的保证金类别，包括：

mt- = margin-top
mb- = margin-bottom
ml- = margin-left
mr- = margin-right
my- = it sets margin-left and margin-right at the same time on y axes
mX- = it sets margin-bottom and margin-top at the same time on X axes

这里解释了这一点以及更多内容https://getbootstrap.com/docs/5.0/utilities/spacing/ 最好的学习方法是通过https://getbootstrap.com网站本身。它解释了很多关于其内置类的内容。