mt-2 仅在 xs 断点（min-width: 0）生效；响应式间距类必须带断点前缀（如 mt-md-2）才能在对应及以上屏幕生效，否则在更大断点可能失效或被覆盖。
Bootstrap 5 的 mt-*、ps-* 类名到底怎么用
Bootstrap 5 默认启用响应式间距工具类，所有 margin 和 padding 类都自带断点前缀（如 mt-md-3），没有前缀的（如 mt-3）只作用于 xs 断点（即 min-width: 0），不是“全局生效”。
常见错误是写 mb-4 以为在所有屏幕都生效，结果在中屏以上发现间距消失——其实是被后续带断点的同类规则覆盖了（比如你又写了 mb-md-0），或者压根没加断点导致只在手机上起作用。
-
mt-2：仅在xs（mt-sm-2：从sm（≥576px）起生效，且向上继承（sm、md、lg、xl、xxl 都生效） - 想让某个 margin 只在大屏有、小屏无？用
mt-0 mt-lg-3——先清零，再在lg起设值 - Bootstrap 5 不再支持
-auto值（如mx-auto仍可用，但ms-auto是推荐写法，ml-auto已废弃）
为什么 pt-5 在 iPad 上不生效，但 pt-md-5 可以
因为 iPad 竖屏宽度通常是 768px，落在 Bootstrap 的 md 断点（≥768px）范围内，而 pt-5 仅匹配 xs，所以被忽略。这不是 bug，是设计逻辑：响应式类默认“最小断点生效 + 向上应用”，不向下穿透。
断点对应关系要记牢：xs（0）、sm（576）、md（768）、lg（992）、xl（1200）、xxl（1400）。
- 调试时用浏览器 DevTools 查看 computed styles，确认最终生效的是哪条 CSS 规则（常看到
@media (min-width: 768px)下的声明） - 别依赖“看起来像 iPad 就该走 sm”，实际得看 viewport 宽度和
<meta name="viewport">是否正确设置 - 如果项目需兼容非标准尺寸设备，建议用自定义断点或直接写媒体查询，别硬凑内置类
水平居中用 mx-auto 还是 ms-auto me-auto
mx-auto 在 Bootstrap 5 中依然有效，但它是基于 margin-left: auto; margin-right: auto 实现的，要求元素是块级且有明确宽度（否则无效）。而 ms-auto me-auto 是更细粒度的控制，语义更清晰，也兼容未来可能的 RTL 布局切换。
- 对固定宽容器（如
<div class="w-50">）：两者效果一致，mx-auto更简洁 - 对 Flex 子项：优先用
ms-auto或me-auto，因为 Flex 布局下automargin 行为更可靠 - 在 Grid 容器里：
justify-self: center比 margin 更合适，Bootstrap 不提供对应工具类，别硬套
自定义间距值或禁用某断点的 padding 怎么办
Bootstrap 默认只提供 0–5 和 auto 的间距步进（$spacers: (0, .25, .5, 1, 1.5, 3)），如果需要 1.75rem 或只在 xl 屏幕加 pb，就得自己扩展。
最稳妥的方式是在 Sass 中重定义 $spacers 或新增断点映射，而不是用 !important 覆盖工具类——后者会破坏响应式链路，且难维护。
- 若只是临时调整，直接写内联样式：
style="padding-bottom: 1.75rem"，但仅限原型或极少数场景 - 想禁用某个断点的 padding？不要删类，而是显式设为 0：
pb-md-0 pb-lg-3 - 注意：Bootstrap 5 的工具类生成是静态的，不会因为你没用
pt-xl-2就减少 CSS 体积；按需引入需配合 Sassenable-responsive开关或 purgeCSS
响应式间距不是“写了就自动适配”，它是一套需要理解断点继承规则、覆盖逻辑和布局上下文的约束系统。最容易被忽略的是：同一个方向的多个间距类会按 HTML 顺序叠加生效，而不是取最大值。
