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-sm-4、mb-md-4 这些类到底怎么生效
Bootstrap 的响应式 margin 类（如 mb-sm-4）本质是 CSS 媒体查询规则，不是 JS 动态计算。每个带断点前缀的类都对应一条独立的 @media 规则：
-
mb-sm-4→@media (min-width: 576px) { margin-bottom: 1.5rem; } -
mb-md-4→@media (min-width: 768px) { margin-bottom: 1.5rem; } -
mb-lg-4→@media (min-width: 992px) { margin-bottom: 1.5rem; }
注意：sm 不是“小屏设备”，而是“最小宽度 ≥576px”的断点阈值；手机竖屏多数 ≤428px，所以 mb-sm-4 在 iPhone 上根本不会激活。
怎么让外边距只在大屏出现、小屏完全消失
必须先清零，再在目标断点启用。比如只在 ≥992px 时有底部外边距：
<div class="mb-0 mb-lg-5">内容</div>
关键点：
- 别只写
mb-lg-5—— 小屏会继承默认 margin 或父容器行为，结果不可控 - 不用
mb-sm-0 mb-md-0 mb-lg-5—— 冗余，mb-0已覆盖所有更小断点 - 如果用了 Flex 或 Grid 布局，注意 margin 可能被容器对齐方式（如
align-items: start）削弱视觉表现
哪些地方绝对不能加响应式 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>
真正容易被忽略的是：断点类本身不解决 margin 塌陷问题。如果父子间无 border/padding，子元素的 mt-5 可能“消失”，这时候得换思路——给父容器加 pt-5，而不是硬调子元素 margin。
