必须用 .row 包裹子 .col，否则栅格失效；嵌套时子列总和≤12，推荐 .col-3×4、.col-4×3 或 .col-6×2；需加 mt-2、gx-4 控制间距；禁用自定义 padding/margin 和 inline-block。
嵌套必须用 .row 包裹子 .col，否则列宽和换行全乱
直接在 .col-* 里写另一个 .col-*，浏览器不会识别为栅格项——它只是普通块元素，width、flex、margin 全失效。Bootstrap 的栅格逻辑依赖 .row 提供的 margin: 0 -15px 和 .col 的 padding: 0 15px 成对抵消，缺一层 .row，内容就会撑破父列或贴边。
常见错误现象：
- 右侧卡片文字紧贴父列右边缘，甚至被截断
- 小屏下整块区域横向滚动（
overflow-x: hidden失效） - 第二行卡片高度不一致，网格流断裂
正确做法是：每个 .col-* 内部如需多列，必须先加一层 .row，再放子 .col-*。比如 <div class="col-8"><div class="row"><div class="col-4">...</div></div></div>。
子列总和必须 ≤12，超了就自动换行，但人眼容易误判剩余空间
嵌套时，子列宽度加起来不能超过 12，否则会强制换行——这在父列已占空间的前提下特别隐蔽。例如外层是 .col-8，你可能下意识觉得“还能塞 4 列”，但实际子网格仍按 12 列基准计算，.col-4 + .col-4 + .col-4 = 12 才能单行排满。
推荐组合（避免留白/错位）：
-
.col-3× 4（适合 4 卡/行） -
.col-4× 3（适合 3 卡/行） -
.col-6× 2（适合双栏并列）
别用 .col-3 × 3 = 9 这种组合，剩下 3 列空白会导致右侧不对齐，尤其在响应式断点切换时更明显。
嵌套的 .row 默认无垂直间距，卡片/文本块糊在一起
多个 .row 上下紧贴，没有呼吸感。手动写 margin-top 容易和其它组件的 margin collapse 冲突；Bootstrap 工具类更稳妥。
实操建议：
- 用
mt-2（margin-top: 0.5rem）、mb-3控制卡片间距 - 水平间隙统一用
gx-4（gap-x: 1.5rem），比改margin更干净 - 若需彻底去间隙，用
gx-0 gy-0，别碰.row { margin: 0 }
性能和兼容性：工具类优先，避免自定义 margin/padding 覆盖栅格基线
Bootstrap 的栅格系统靠 .row 的负外边距和 .col 的内边距配合工作。一旦你在 .col 上写 padding: 0 或 margin: 10px，整个嵌套结构的对齐、换行、响应行为都可能异常。
真正影响兼容性的点：
- 在
.col上加display: inline-block→ 破坏 flex 布局 - 用
.container-fluid但没限制内部内容宽度 → 小屏溢出 - 只写
.col-lg-6没配.col-12→ 小屏堆叠失败
最常被忽略的是：嵌套层级越深，越要检查每一层的 .row → .col → .row → .col 是否完整闭合——漏一个 .row，后面所有列都会偏移。
