嵌套 .row 必须加 mx-n3（bootstrap 5）或 mx-n2（bootstrap 4）以抵消外层 .col 的 padding，否则因负 margin 未生效导致空白错位；不可手写 margin 或用 ml/mr 类，须确保父列宽度足够、box-sizing 正确且无样式覆盖。
直接改 .row 的 margin 或给 .col 手动加 padding 会破坏 Bootstrap 的配对机制，导致响应式错乱、右侧裁切甚至水平滚动条——这不是微调，是逻辑断裂。
为什么嵌套后列左右多出空白？
根本原因是外层 .col 的 padding-left: 15px 和 padding-right: 15px 没被内层 .row 的负外边距完全抵消。Bootstrap 的栅格依赖「负 margin + 正 padding」严格配对：.row 默认带 margin-left: -15px，只对它的直接父容器生效；一旦 .row 被塞进 .col 里，那 15px 就“悬空”了。
- Chrome DevTools 的 “Layout” 面板里能看到
.col的 padding 实际存在，但.row的 margin 没把它拉回来 - 这个现象只在嵌套时出现，平级使用
.row完全正常 - 不是 CSS 没加载，是盒模型叠加后“多出来”的视觉偏移
嵌套的 .row 必须加 mx-n* 类，不能手写 margin
Bootstrap 5 推荐用 mx-n3（对应 margin-inline-start: -1rem; margin-inline-end: -1rem），Bootstrap 4 用 mx-n2。这是唯一安全、语义化、支持 RTL 和响应式断点的修正方式。
-
mx-n3不是“随便减 1rem”，它精准匹配$spacer: 1rem下的 gutter 半值，和框架内部计算一致 - 必须加在嵌套的
.row上，不是父.col，也不是子.col - 别用
ml-n3 mr-n3——它不支持 RTL，且在sm断点下可能只生效一边，造成左右不对称 - 手动写
style="margin: 0 -15px"看似简单，但会绕过所有响应式逻辑，mx-n3在md断点自动失效，而内联样式永远生效
加了 mx-n* 还错位？检查这三件事
负边距本身不会破坏布局，但它会把已有结构问题放大成可见错位。
- 确认父
.col宽度足够：比如.col-4里放两个.col-6，再加mx-n3，实际宽度就超了 12 栅格，必然换行或溢出 - 检查
box-sizing：Bootstrap 依赖全局box-sizing: border-box。如果某个祖先元素（比如自定义 wrapper）是content-box，负 margin 计算就会失准 - 关掉所有自定义 CSS，只留 Bootstrap 官方 CSS，确认是不是第三方样式覆盖了
mx-n3的权重或声明
真要自定义数值，别碰 .row 的 margin，改 .col 内部间距
想控制列内容到边框的距离（比如卡片内边距），用 px-2、py-1 这类工具类；想控制列与列之间的间隙（gutter），用 gx-3 或 gy-2。这两者不能混用。
- 给
.col直接加padding后再嵌套.row，会导致外层 padding 和内层mx-n3叠加，空白更难控 - 非标准值（如 6px）应在
_custom.scss中扩展，加!important并命名清晰（如p-col-6），避免和系统p-*冲突 - 修改 CSS 变量
--bs-gutter-x会影响所有用到该变量的组件（list-group、accordion），不只是栅格
最容易被忽略的是：嵌套不是“多套一层 class 就行”，而是每层 .row 都在重建栅格基线；漏掉 mx-n*，等于让这一层失去对齐锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
