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

【问题标题】：What is class="mb-0" in Bootstrap 4?Bootstrap 4 中的 class="mb-0" 是什么？
【发布时间】：2017-05-25 07:02:45
【问题描述】：

latest documention 有：

&lt;p class="mb-0"&gt;Lorem ipsum&lt;/p&gt;

问：mb-0 是什么？

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

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

xs (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 - 将 margin 或 padding 设置为 0

1 - 将 margin 或 padding 设置为 .25rem（如果字体大小为 16px，则为 4px）

2 - 将 margin 或 padding 设置为 .5rem（如果字体大小为 16px，则为 8px）

3 - 将 margin 或 padding 设置为 1rem（如果 font-size 为 16px，则为 16px）

4 - 将 margin 或 padding 设置为 1.5rem（如果 font-size 为 16px，则为 24px）

5 - 将 margin 或 padding 设置为 3rem（如果 font-size 为 16px，则为 48px）

auto - 将边距设置为自动

在Bootstrap 4.5 - Spacing查看更多信息

Read more in w3schools

【讨论】：

Bootstrap 4 中的 mb-0 类相当于 margin-bottom: 0px;听起来不错？
这些定义都可以在boostrap.css中找到
@java-addict301 在 4 年前，需要额外搜索才能找到这些定义。
优秀的答案！将其保存为备忘单。
xs (<=576px) 应该是 xs (<576px)，但字符太少，我无法进行编辑。

【解决方案2】：

引导程序 4

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

【讨论】：

感谢您提供原始文档的链接。我宁愿直接从源头阅读，而不是通过第三方，比如 w3schools！

【解决方案3】：

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

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

大小是边距之一：

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

【讨论】：

嗨@sta 我和你失去了联系?

【解决方案4】：

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（如果字体大小为 16 像素，则为 4 像素）

2 - 将边距或内边距设置为 .5rem（如果字体大小为 16px，则为 8px）

3 - 将边距或内边距设置为 1rem（如果 font-size 为 16px，则为 16px）

4 - 将边距或内边距设置为 1.5rem（如果 font-size 为 16px，则为 24px）

5 - 将边距或内边距设置为 3rem（如果 font-size 为 16px，则为 48px）

auto - 将边距设置为自动

【讨论】：

【解决方案5】：

Bootstrap 具有我们用于样式的预定义类。如果您熟悉 CSS，您就会知道什么是内边距、边距和间距等。

mb-0 = margin-bottom: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 网站本身。它解释了很多关于它的内置类。

【讨论】：

【解决方案6】：

class="mb-0"

m - 设置边距

b - 设置底部边距或内边距

0 - 设置 0 边距或内边距

CSS 类

.mb-0{
       margin-bottom: 0
     }

【讨论】：