mb-3不生效而mb-4可以，是因为bootstrap间距工具类依赖$spacers映射生成css，若未重新编译sass或使用cdn则自定义值（如mb-3）不会被识别；需在项目入口sass中正确覆盖$spacers变量并确保加载顺序。
为什么 mb-3 不生效，但 mb-4 可以？
Bootstrap 的间距工具类（如 mb-3）依赖预设的 spacing scale，值必须在 $spacers 映射范围内才生成对应 CSS。如果你改过 Sass 变量但没重新编译，或用了 CDN 版本，自定义的数值（比如 mb-3.5）根本不会被识别——它压根没被编译进 CSS 文件里。
- 检查你是否在
_custom.scss中修改了$spacers，且确保该文件被@import到主入口 - CDN 用户无法动态新增间距类，只能覆盖已有类或额外写 CSS
-
mb-3对应的是1rem（默认），不是像素值；改$spacer基础值会影响所有衍生类
用 Sass 覆盖默认 $spacers 的正确姿势
直接改 node_modules/bootstrap/scss/_variables.scss 是错的——下次 yarn install 就被冲掉。应该在项目自己的 Sass 入口文件里，在 @import "bootstrap/scss/functions" 之后、@import "bootstrap/scss/variables" 之前注入新定义。
- 先定义
$spacers: (0: 0, 1: .25rem, 2: .5rem, 3: 1rem, 4: 1.5rem, 5: 3rem, 6: 6rem); - 再
@import "bootstrap/scss/variables"，这样 Bootstrap 内部会基于你的$spacers生成工具类 - 如果还用了
$theme-spacers（如mb-lg-3），也要同步重定义它
不碰 Sass 时，怎么给某个元素加「非标」间距？
比如需要 margin-bottom: 7px，但 Bootstrap 没提供 mb-7。硬写 style="margin-bottom: 7px" 会破坏可维护性，也绕不开内联样式的优先级问题。
- 推荐在项目 CSS 中单独写一条：
.mb-7px { margin-bottom: 7px !important; } - 避免用
!important？那就把这条 CSS 放在 Bootstrap CSS 之后加载，并去掉!important，靠源顺序提升权重 - 别用
mt-auto或mx-auto混搭来“凑”间距——它们解决的是布局逻辑，不是尺寸控制
响应式间距类失效的常见原因
mb-md-4 在小屏下没反应，不一定是写错了，很可能是断点阈值和当前视口宽度刚好卡在边界上，或者父容器触发了 overflow: hidden 把外边距“裁掉”了。
- Bootstrap 的
md断点是768px，但浏览器 DevTools 的设备模拟可能四舍五入显示为768，实际是767.98px—— 这时候mb-md-4不会生效 - 检查父元素是否有
padding或border导致子元素的margin被折叠（margin collapse） - 用
inspect查看 computed 样式，确认margin-bottom是否真的被应用，而不是被其他规则覆盖
