Bootstrap 4 和 5 中的 Bootstrap 间距实用程序类有何变化？

如何在 Bootstrap 中使用间距实用程序类？

在一篇文章中，您遇到了 Bootstrap 4 间距实用程序类，例如 m-b- lg，您尝试在 React MeteorJS 应用程序中实现它，但没有成功。为了澄清这一点，让我们探索一下 Bootstrap 间距实用程序的用法和更新。

Bootstrap 5（beta 2021）

自从 Bootstrap 5 引入了 RTL 支持后，左和右概念已替换为开始和结束，导致 l- 和 r- 间距实用程序发生变化：

• pl-* = ps-*
• pr-* = pe-*
• ml-* = ms-*
• mr-* = me-*

引导程序Bootstrap 4（2020 更新）

Bootstrap 4 的间距实用程序自 alpha 版本以来不断发展。更新后的语法为：

• 边距： m{sides}-{size}
• 填充： p{sides}-{大小}

例如：

• mb-2 = 边距底部 2 个间距单位
• m-0 = 无边距
• pt-3 = 填充顶部 3 个间距单位
• p-1 = 填充所有侧面 1 个间距单位

Bootstrap 4 提供了 6 种尺寸（0-5），代表了一部分默认 0.5rem 间隔单元。此外，您现在可以指定 x 轴（左/右）和 y 轴（上/下）实用程序：

• my-2 = 边距顶部和底部 2 个间距单位
• mx-0 = 左右无边距
• px-3 = 左右填充 3 个间距单位

此外，这些间距实用程序是响应式的，具有最小的断点 (xs ) 如果未指定断点，则隐含：

• mt-md-2 = 边距顶部 2 个间距单位，在 md（及以上）
• py-sm-0 = 无填充顶部& 底部，sm（及以上）

以上是Bootstrap 4 和 5 中的 Bootstrap 间距实用程序类有何变化？的详细内容。更多信息请关注PHP中文网其他相关文章！