bootstrap 5 的 margin 类需按“方向缩写+断点前缀+数值”顺序书写，如 ms-md-3；无断点类（mt-2）从 xs 起生效，带断点类（mt-md-2）仅在对应及更大断点生效，且需显式归零才能关闭小屏效果。
Bootstrap 5 的 margin 类名怎么按屏幕尺寸写？
Bootstrap 5 的响应式 margin 类不是靠“加前缀”硬编码出来的，而是用 sm、md、lg、xl、xxl 这些断点缩写 + 方向 + 大小组合生成的。比如 ms-md-3 表示「中屏及以上左外边距为 3」（注意：ms- 是 margin-start，不是 ml-，因为 RTL 支持已成默认）。
常见错误是直接套用 Bootstrap 4 的 ml-lg-2 写法，结果在 v5 里失效——v5 把 l/r 换成了 start/end，且断点必须显式声明，没有「默认只在大屏生效」这种隐含逻辑。
-
mt-2：所有尺寸都生效（无断点前缀） -
mt-sm-2：≥576px 才生效（sm断点起始） -
mt-md-2：≥768px 才生效，且会覆盖sm尺寸下的设置 - 方向缩写：
mt（top）、mb（bottom）、ms（start / 左）、me（end / 右）、mx（左右）、my（上下）、mp（padding 同理）
为什么加了 mt-lg-3 在小屏上还有 margin？
因为 Bootstrap 的响应式类是「向上生效」（up），不是「仅在此尺寸生效」。也就是说，mt-lg-3 表示「在 lg 及更宽的屏幕生效」，它不会自动取消 mt-2 这种无断点类的效果。
真正要实现「小屏无 margin、大屏有 margin」，得手动覆盖：
<div class="mt-0 mt-lg-3">内容</div>
这里 mt-0 清掉所有尺寸的上边距，mt-lg-3 再在 ≥992px 时设为 3。漏掉 mt-0，小屏就会继承默认或父级的 margin。
- 断点类之间不互斥，需显式归零才能「关闭」某尺寸下的效果
- 不要依赖「没写就是没效果」——Bootstrap 默认会给很多组件加 margin（比如
<h1></h1>自带mb-3） - 用浏览器开发者工具检查 computed styles，确认最终生效的是哪一条 CSS 规则
margin 大小数值对应多少像素？
Bootstrap 5 默认 spacing scale 是基于 $spacer: 1rem（通常 ≈16px），然后按比例缩放：0→0px、1→.25rem（4px）、2→.5rem（8px）、3→1rem（16px）、4→1.5rem（24px）、5→3rem（48px）。这些值可在 SCSS 中自定义，但类名不变。
如果你改过 $spacers 变量，类名还是叫 mt-3，但实际像素会变——别硬记 px 值，看设计稿时直接量 rem 或查当前项目的编译后 CSS。
-
mt-3≠ 固定 16px，它等于当前$spacer * 1 - 想微调但不想写新类？用
style="margin-top: 12px"覆盖，但慎用，破坏响应式一致性 - 需要非标间距（比如 10px）？要么加自定义 CSS 类，要么用
mt-2+mt-3组合逼近（不推荐）
移动端适配时 margin 突然消失或错位？
大概率是用了 ms-auto / me-auto 这类「自动 margin」，它们在 flex 容器里才有效。如果父容器没加 d-flex 或 flex-* 类，ms-auto 就完全不生效，看起来像「消失了」。
另一个常见原因是 viewport meta 标签缺失或写错，导致移动端强制以桌面宽度渲染，断点判断失效——此时 mt-sm-2 可能永远不触发。
- 检查 HTML head 里有没有：
<meta name="viewport" content="width=device-width, initial-scale=1"> -
ms-auto必须配合 flex 布局，单独用在<div> 上无效<li>真机调试比模拟器更可靠，iOS Safari 对 flex + auto margin 的兼容性偶尔有差异</li> <p>Bootstrap 的 margin 类看着简单，但断点叠加、方向语义变化、spacing 缩放、布局上下文这四层一叠，很容易漏掉其中一层。写的时候别只盯着类名拼写，先想清楚「这个 margin 应该在哪种容器里、对哪些尺寸生效、会不会被其他规则覆盖」。</p> </div>
