bootstrap网格需配合.container或.container-fluid使用，否则.col-*类失效；.container定宽居中，.container-fluid全宽；漏写会导致列撑满、间距错乱、断点不触发、移动端堆叠失效。
不加 .container，.row 和 .col-* 就是摆设
bootstrap 网格不是一堆独立生效的 css 类，它靠容器宽度 + 负边距抵消逻辑才能正常工作。漏掉 .container 或 .container-fluid，所有列会撑满、间距错乱、断点完全不触发。
-
.container：定宽居中（如 1200px），适合正文内容 -
.container-fluid：100% 宽度，适合全屏背景、仪表盘等场景 - 直接把
.col-6放在下 → 列宽不可控，padding 失效，响应式类不生效
移动端堆叠失效？大概率是没写 .col- 基础类
Bootstrap 5 是「移动优先」，.col-（无后缀）对应超小屏（.col-md-6，手机上不会自动堆叠——浏览器按普通块级元素渲染，但 Bootstrap 没给 width，结果就是内容挤成一行、高度参差。
- 正确写法：
.col-12 .col-sm-6 .col-lg-4→ 手机竖屏占满、平板横屏两栏、桌面三栏 - 错误写法：
.col-md-6→ xs/sm 下无定义，列宽由内容撑开，不可预测 - 想全尺寸占满？只用
.col-12，别混搭其他断点类
嵌套网格时，.row 必须出现在每个 .col-* 内部
在列里再分栏，不能直接塞子 .col-*。否则 flex 布局失效，列宽计算错误、换行异常、高度不一致——这是卡片布局错位最常见的原因。
- ✅ 正确结构：
<div class="col-8"><div class="row"> <div class="col-6">...</div> <div class="col-6">...</div> </div></div> - ❌ 错误结构：
<div class="col-8"><div class="col-6">...</div></div>（缺少.row包裹） - 嵌套行内列宽总和建议为 12（如
.col-4 .col-4 .col-4），避免意外换行
改列间距（gutter）不能手动调 padding 或 margin
Bootstrap 5 的 gutter（列间间隙）默认是 1.5rem（24px），但它只对 .row 生效，且必须通过内置间距工具类覆盖，比如 .g-3（对应 0.75rem）、.g-5（对应 3rem）。
- 无效操作：
style="padding: 10px"或自定义.row { margin: 0 }→ 破坏负边距抵消机制，列错位 - 有效操作：用
.g-0（无间隙）、.g-2～.g-5等工具类直接加在.row上 - 注意：
.g-*类只影响当前.row，不影响全局
列宽计算、断点继承、嵌套规则这三处最容易被跳过，但一出问题就难定位——因为现象是“看起来差不多”，实际是布局逻辑崩了。
