mb-4仅在xs断点（min-width: 0）生效，不会延续至更大屏幕；需用mb-sm-4等带断点前缀的类才能在对应及以上屏幕生效，否则在≥576px时失效。
为什么直接写 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），但只看到一个效果 → 它们不是覆盖关系，而是按当前断点条件触发，浏览器会选中唯一匹配的那条规则
怎么让外边距随屏幕变大而逐步增加
不能靠单个类实现“连续变化”，但可以用断点类叠加逼近阶梯式增长。例如：想实现「小屏无上边距 → 中屏 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不会影响
如何让外边距只在大屏出现、小屏完全消失
必须先清零，再在目标断点启用。比如只在 ≥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>
Computed 面板，看最终生效的是哪条 margin-bottom 声明，比猜断点阈值靠谱得多。尤其要注意 viewport 设置是否正确——很多“类不生效”的问题，根源是 <meta name="viewport"> 缺失或写错。
