在 Bootstrap 中使用间距实用程序类

在 Bootstrap 中，间距实用程序类允许您轻松控制元素周围的间距。但是，如果您在使用它们时遇到问题，这里有一个指南可以帮助您解决。

更新的间距语法（Bootstrap 4 和 5）

Bootstrap 4 引入了间距实用程序类的简化语法：

边距：
m{sides}-{size}

Padding：
p {sides}-{size}

例如：
mb-2 = 底部边距 2 个间距单位
p-1 = 所有边距 1 个间距单位

Bootstrap 5 包括RTL 支持，导致特定方向前缀的更改：

*pl-* = ps-* (start)
*pr-* = pe-* (end)
*ml- * = ms-* (开始)
*mr-* = me-* (结束)

响应式间距

您现在可以将间距应用于特定断点使用以下语法：

边距：
m{sides}-{breakpoint}-{size}

填充：
p{sides}-{breakpoint}-{size}

例如：
mt-md-2 = 中等屏幕及以上屏幕上的边距顶部 2 个间距单位

MeteorJS 与 React 的示例

如果您在 React 中使用 MeteorJS，请确保安装了 bootstrap-spacer 软件包：

meteor npm install bootstrap-spacer

然后，将间距实用程序类导入到您的组件中：

import { spacers } from "bootstrap-spacer";

像在标准 HTML 中一样使用实用程序类：

  ...

故障排除

• 如果间距类不起作用，请验证 bootstrap-spacer 包是否已安装并导入到您的组件中。
• 确保您使用的类名与更新的语法匹配。
• 查看相关文档以获取其他信息和示例。