Bootstrap栅格要求.row必须是.col-的直接父级，否则负外边距与正内边距的咬合机制失效，导致列贴边、间距错乱；正确结构为.container→.row→.col-，禁止中间插入其他元素。
row 必须是 col 的直接父级，否则样式失效
Bootstrap 的 .row 通过负外边距（margin-left: -15px / margin-right: -15px）抵消 .container 的内边距，而 .col-* 用正内边距（padding-left: 15px / padding-right: 15px）制造列间距。这两者是一对“咬合机制”，一旦中间插入其他元素（比如 <div>、<code><section></section> 或空标签），负 margin 就无法作用到 col 上，结果就是列贴边、间距错乱、甚至内容溢出容器。
常见错误现象：
- 列左右紧贴浏览器边缘（漏写或错放
.row） - 两列之间没间隙（
.row被包裹在另一个非.container元素里） - 控制台报“Invalid prop `className`”（React 中误把
.row当作组件属性传）
正确结构只有一层嵌套：.container → .row → .col-*。不要在 .row 和 .col-* 之间加任何 wrapper。
col-* 类必须成组出现在同一 row 内，不能跨行混用
Bootstrap 的栅格是“行内 12 列制”，每行最多容纳 12 份宽度。如果某行写了 .col-md-8 + .col-md-6（合计 14），第二个列会自动换行——这不是 bug，是设计行为。但很多人误以为这是“响应式堆叠”，其实只是栅格系统的基础容错逻辑。
使用场景和参数差异：
- 想让两个 div 并排且等宽：用
.col-6+.col-6，不是.col-4+.col-4（那会剩 4 列空白） - 主内容 + 侧边栏：推荐
.col-lg-8+.col-lg-4，避免小屏下因总和超 12 导致意外折行 - 移动端单列、桌面端三列：写
.col-12 .col-md-6 .col-lg-4，注意断点类顺序不能颠倒（移动优先原则）
性能影响很小，但 class 过多会略微增加 HTML 体积；建议只写必要的断点类，比如手机默认就是 .col-12，不必显式声明。
container 和 row 的宽度逻辑不一致，别混用 fluid 和 fixed
.container 是固定宽度（如 lg 屏下约 960px），居中；.container-fluid 是 100% 宽度，撑满视口。但无论哪种，.row 都会自动设置 max-width: 100% 并减去左右 15px，确保内容不贴边。
容易踩的坑：
- 把
.row直接放在里（缺少容器约束，.row会 100% 宽但无 padding 控制） - 在
.container-fluid里嵌套.container（造成双重内边距，视觉上缩进过度） - 用
.row包裹全屏 Banner 时，发现左右有白边（应改用.container-fluid > .row，并移除额外 padding）
如果你需要局部全宽（比如轮播图）、局部居中（比如正文），就分开用两种容器，不要试图靠 mx-auto 或 w-100 强行模拟。
col-auto 不是“自适应”，它只收缩内容，不释放空间
.col-auto 的真实行为是：宽度由子内容决定（width: fit-content），但它不会主动“让出剩余空间”给兄弟列。如果同行还有 .col，后者仍按栅格规则占位；如果只有 .col-auto，它就真的只占那么一点，其余空白归零。
典型误用：
-
.col-auto+.col并排，期望后者填满剩余宽度（实际后者仍按 12 列体系算，比如.col-8就只占 8/12） - 按钮配文字描述，用
.col-auto包按钮 +.col包文字，结果文字列太窄换行（应改用.col+.col-auto ms-auto把按钮推到右侧）
真正要“剩余空间均分”，用 .col（无数字后缀）或 .flex-grow-1；.col-auto 只适合图标、开关、短标签这类宽度绝对可控的元素。
