Bootstrap间距工具通过预设类名生效，无需JS或CSS；mb-3无效主因是inline元素不支持垂直外边距或父容器布局约束；RTL下ms/me类自动翻转需启用Bootstrap RTL模式；响应式间距用mt-0 mt-md-3 mt-lg-5等组合。

Bootstrap 间距工具不是“用”，而是“选对类名就生效”——它不依赖 JavaScript，也不需要写 CSS，但类名规则和响应式断点容易配错，导致 margin/padding 完全没反应。

为什么加了 mb-3 没效果？

最常见原因是元素本身 display 类型或父容器约束干扰了外边距表现。比如：inline 元素（如 <span></span>）不支持 margin-top / margin-bottom，此时 mb-3 实际被浏览器忽略；又或者父容器设置了 overflow: hidden 或 flex 布局未设 align-items，导致外边距塌陷或被截断。

• 优先改用 block 或 flex 元素（如 <div>、<code><section></section>）测试间距类
• 检查是否误用了方向缩写：mt- 是 top margin，pt- 是 top padding，混用会导致视觉错乱
• 确认 Bootstrap CSS 已正确加载（查看 DevTools 中 mb-3 是否出现在 computed styles 里）

ms-2 和 me-2 在 RTL 页面下会自动翻转吗？

会，但前提是启用了 Bootstrap 的 RTL 模式——即 HTML 标签带 dir="rtl"，且你使用的是 Bootstrap 5.3+ 的完整 CSS 包（非 bootstrap.min.css 独立文件）。否则 ms-（margin-start）仍按 LTR 解析为 left，不会变成 right。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• RTL 下 ms- → 变为 margin-right，me- → 变为 margin-left
• 若手动引入 CSS，请确保用的是 bootstrap.rtl.min.css 或构建时启用了 RTL 支持
• 调试时可直接在 DevTools 修改元素的 direction，观察类名计算值是否切换

如何让间距随屏幕大小变化？

直接拼接响应式前缀，例如 mt-0 mt-md-3 mt-lg-5：在 xs 断点（md（≥768px）时为 3 单位，在 lg（≥992px）时为 5 单位。注意断点前缀必须从小到大书写，否则会被后续覆盖。

• 单位值对应 $spacers Sass 变量，默认 3 是 1rem（16px），5 是 3rem（48px）
• 不要跳过中间断点，比如只写 mb-sm-2 mb-xl-4，那么 md/lg 下会沿用 sm 的值（2）
• 想在某个断点“清空”间距？用 mt-md-0 覆盖掉更小断点的设置即可

真正容易被忽略的是：间距工具对 display: grid 容器内的直接子元素无效——Grid 子项的 margin 不会触发网格轨道调整，此时得用 gap 或包装一层 <div>。别硬套 <code>mb-3，先看布局模式。