mt-sm-3在手机竖屏无效，因其仅在≥576px生效；手机宽度多为360–414px，应优先写基础类（如mt-3），再叠加断点类（如mt-md-4）。
为什么手机上写了 mt-sm-3 却没反应
因为 mt-sm-3 只在视口 ≥576px 时生效，而绝大多数手机竖屏宽度是 360–414px，根本达不到这个断点。它不是“小屏用”，而是“≥sm 才启用”。真正从 0px 就起效的是无前缀类，比如 mt-3。
常见错误现象：
- 开发者切到 iPhone SE 模拟器，看到
mt-sm-3没效果，以为类写错了 - 在 DevTools 的 Computed 面板里搜
margin-top，发现该属性被划掉或压根没出现
正确做法是移动优先：先写基础类（如 mt-2），再叠加断点类（如 mt-md-4）。只写 mt-sm-2，等于小屏下完全没定义 margin。
为什么加了 pe-5 却看不见右内边距
pe-5（padding-right: 3rem）本身已生效，但视觉上“消失”，往往是因为缺失容器结构——.row 直接挂在 下，导致其自带的 margin-left: -15px 和 margin-right: -15px 突破视口边界，引发横向滚动条或内容截断，掩盖了 padding 效果。
验证方法：
- 临时给目标元素加
style="background: #ffeb3b;"，看黄色区域是否延伸到右侧 - 打开 DevTools → Computed → 搜索
padding-right，确认值为3rem且未被覆盖 - 检查父级是否为
.container或.container-fluid，若没有，补上
为什么 g-3 在手机上列还是紧贴着
g-3 是全局 gutter 开关，对所有断点一视同仁；它不会随屏幕变小自动收缩。想让手机端无间距、桌面端恢复标准列距，必须拆开用响应式类：gx-0 gx-lg-3。只写 g-3，小屏下照样有 1rem 水平间距。
容易踩的坑：
- 把
g-3加在.col上——无效，它只对.row生效 - 混用
g-3 gy-0：后者会覆盖垂直部分，但水平 gutter 仍是 1rem，不是清零 - 用
px-3模拟列间距：它只加 padding，不修正.row的负 margin，结果列宽计算错乱，甚至出现横向滚动条
为什么 .row + .row 看起来空太多或突然贴死
.row 本身没有上下 margin，它的垂直节奏靠父容器 padding 和内部元素（如 自带的 margin-bottom）撑开。你手动加 mb-4，等于在已有留白上再叠一层；切到手机时，若没写 mb-md-4 这类断点类，小屏下就只剩原始留白，看起来“突然贴死”。
更安全的做法：
- 用相邻兄弟选择器：
.row + .row { margin-top: 1.5rem; }，只影响紧挨着的两个.row - 如果真要统一控制，改 CSS 变量
--bs-spacer或覆盖.row::after，而不是直接设margin-bottom - 别给
.row加px-*或py-*：破坏栅格对齐逻辑，嵌套结构尤其容易错位
真正容易被忽略的，是把“响应式”当成自动适配——它其实是断点触发的显式开关，漏掉基础类、缺容器、断点写反，都会让间距工具类在手机端彻底静默。
