因为mb-4仅在xs断点（min-width: 0）生效，不向上继承，大屏需显式使用mb-sm-4等带断点前缀的类；常见错误是忽略断点覆盖逻辑和空档区间，导致样式失效或不可控。
为什么直接写 mb-4 在大屏下没效果
因为 mb-4 只在 xs 断点（min-width: 0）生效，它不会“自动延续”到更大屏幕。一旦视口宽度 ≥576px，这个类就不再起作用——除非你显式加了 mb-sm-4 或更高断点的类。
- 常见错误：在 iPad 竖屏（768px）上
mb-4完全不生效 → 实际该用mb-md-4 - 写了
mt-lg-2却发现小屏也有顶部外边距 → 漏掉了mt-0或mt-sm-0清零 - 多个
mt-*类并存（如mt-3 mt-md-0 mt-xl-5），但只看到一个效果 → 它们不是覆盖关系，而是按当前断点条件触发，浏览器会选中唯一匹配的那条规则
mb-0 mb-md-2 mb-lg-4 这种写法怎么起作用
Bootstrap 不支持“连续变化”，但可以用断点类叠加逼近阶梯式增长。例如想实现「小屏无上边距 → 中屏 0.5rem → 大屏 1.5rem」，就得这样写：
<div class="mt-0 mt-md-2 mt-lg-4">内容</div>
说明：
-
mt-0是兜底值，从 0px 开始生效 -
mt-md-2在 ≥768px 启用，覆盖掉mt-0的效果 -
mt-lg-4在 ≥992px 启用，再覆盖前一个 - 注意：Bootstrap 不支持“向下穿透”，
mt-md-2不会影响更小断点，也不会自动降级
哪些地方绝对不能加响应式 margin 类
.container 元素上禁止使用任何带断点的 margin 类（如 mx-md-4）。原因很直接：它的居中逻辑依赖 margin-left: auto; margin-right: auto。一旦你加上 mx-md-4，在 ≥768px 下就会强制设成 margin-left: 1.5rem; margin-right: 1.5rem，auto 被覆盖，居中立刻失效。
- 替代方案：需要控制容器与外部距离 → 包一层
<div class="mb-5"><div class="container"></div></div> - 需要控制容器内部内容离边框的距离 → 用
px-4、py-3这类padding类 - 真要响应式外距 → 把 wrapper 提升为响应式：
<div class="mb-0 mb-md-4"><div class="container"></div></div>
ms- 和 me- 为什么比 ml-/mr- 更推荐
ms-（start）和 me-（end）是逻辑方向类，对应书写方向（LTR/RTL），而 ml-/mr- 是物理方向类，固定左/右。在多语言或 RTL 场景下，ms- 会自动翻转为右边距，me- 翻转为左边距，避免手动维护两套样式。
- 常见错误：写了
ms-md-4却在小屏下看到ms-4生效 → 因为ms-4本身从 xs 起就生效，ms-md-4只在 ≥576px 才启用 - 水平并排卡片间距优先用
me-3，不是mr-3；垂直堆叠用mb-4即可 - 调试时别只看 DevTools 的 Styles 面板，切到 Computed 查看哪个
@media规则真正命中
mb-md-3 mb-xl-0，却忘了中屏到大屏之间（992–1199px）没有定义，此时会回退到默认 margin 或父级继承值，视觉表现不可控。必须确保每个断点区间都有明确兜底或清零动作。 
