必须加.row，否则子列继承父列padding且无负margin抵消，导致左右各多15px内边距、内容缩进或右侧截断；验证方式为检查子.col-*计算后padding是否达30px。
嵌套列必须加 .row，否则父列的 padding 和子列的 padding 叠加，导致内容被撑开、右侧溢出、高度不齐。
为什么嵌套时子列会多出 15px 左右内边距
Bootstrap 的列（.col-*）默认带 padding-left: 15px; padding-right: 15px，而它的父容器 .row 用 margin-left: -15px; margin-right: -15px 抵消掉——这是 gutter 的底层机制。但当你在 .col-8 里直接放 .col-4，子列就没了 .row 这个“抵消者”，于是它继承父列的 padding，又加上自己的 padding，左右各多出 15px，视觉上就是内容缩进或右侧被截断。
浏览器检查元素时，能明显看到子 .col-* 元素左右有两层 15px 内边距。
- 错误结构：
<div class="col-8"><div class="col-4">…</div></div> - 正确结构：
<div class="col-8"><div class="row"><div class="col-4">…</div></div></div>
如何验证是否真的需要嵌套 .row
不是所有嵌套都需要 .row，只在你要在 .col-* 内部再用 .col-* 分栏时才强制需要。如果只是放一段文字、一个卡片、一个按钮，不需要额外 .row；但只要出现第二个 .col-*（哪怕只有一个），就必须包裹在 .row 里。
- ✅ 安全写法：父
.col-*→.row→ 子.col-*（哪怕只写一个） - ❌ 危险信号：Chrome DevTools 里子
.col-*的 computed padding 显示为 30px 左右 - ⚠️ 特殊情况：Bootstrap 4 中若禁用了 flex，
.row的display: flex必须显式保留，否则回退到 float 布局，负 margin 无法正常抵消
想取消嵌套后的列间距？别碰 padding，用 gx-0
有人想“修复多出来的 padding”，就给子列加 px-0 或 !important 覆盖，这只会让问题更糟：因为 .row 的负 margin 还在，你只清了子列 padding，结果整行向左偏移 15px。
- ✅ 正确做法：在嵌套的
.row上加gx-0（Bootstrap 5.1+）或g-0（全方向归零） - ✅ 示例：
<div class="col-8"><div class="row gx-0"><div class="col-4">…</div></div></div> - ❌ 错误尝试：
<div class="col-4 px-0">—— 不协调.row的负 margin，宽度计算错乱 - ? 提示：
gx-md-3可以只在 ≥md 断点启用间距，小屏仍用gx-0，语义清晰且无冲突
真正容易被忽略的点是：嵌套的 .row 不是“可选装饰”，它是栅格系统中唯一能重置 padding/margin 关系的节点。漏掉它，等于把两套独立的边距逻辑硬塞进同一块 DOM，后续任何响应式调整都会放大偏差。
