必须严格使用 .container + .row + .col- 三层嵌套，缺一不可；.row 需置于 .container 内以抵消其负 margin，防止内容溢出；col- 应至少指定一个断点（如 col-12 col-md-6）确保响应式正确；嵌套 row 时需用 .p-0 + .mx-0 或 .row-cols-* 避免偏移；form-floating 必须包裹在独立 div 中，不可直挂于 .col 下。
直接用 .container + .row + .col-* 三层嵌套，不加这三层中的任意一层，网格就大概率失效。
为什么 .row 必须放在 .container 里
因为 .row 默认有 margin-left: -15px 和 margin-right: -15px（Bootstrap 4/5 默认 gutter 是 1.5rem，即 24px，但列 padding 是 12px，row 负 margin 用来抵消），如果外面没 .container 或 .container-fluid 提供内边距约束，这负 margin 就会把内容顶出视口左/右边界，引发水平滚动条——尤其在移动端非常隐蔽。
常见错误现象：.row 直接挂在 下，小屏下页面可左右拖动；Chrome DevTools 里看到 .row 的盒模型明显溢出。
-
.container：带断点最大宽度（如md断点下最大 720px），自动居中 -
.container-fluid：无宽度限制，width: 100%，适合全宽背景或 Banner - 别用
.container-sm这类单断点容器来“替代”响应式逻辑——它只在 ≥sm 时生效，xs/sm 下退化为width: auto，行为不稳定
col-* 类怎么选断点才不翻车
不写断点的 .col 是“等分剩余空间”，写死的 .col-6 是“所有尺寸都占 6 列”，这两者在小屏上极易导致内容过窄、文字折行或控件挤压。真正可控的写法是至少指定一个断点。
使用场景：表单中「姓名」「电话」并排输入框，在桌面端希望两列，在手机上必须单列。
- 错：
- 对：
-
col-sm-*是最常用起点：≥576px（典型 iPhone SE 宽度）开始响应，比xs更实用；xs断点类在 Bootstrap 4+ 已不带前缀（.col-6等价于.col-xs-6），但语义弱，慎用
row 默认负 margin 导致的嵌套错位
当你要在某个 .col 内再分栏（比如详情页右侧栏里放两个小卡片），直接塞 .row 会导致子 .row 的负 margin 没有父级 padding 抵消，列向左偏移——视觉上所有内容被“吸”到左边。
根本原因：Bootstrap 的 gutter 机制依赖“外层容器提供 padding，内层 row 用负 margin 抵消”，嵌套时这个链路断了。
- 正确解法：在嵌套的
.col内加.p-0清除默认 padding，再给子.row加.mx-0（清 margin）；或者直接用.g-0关闭 gutter - 更省事做法：改用
.row-cols-*工具类（如.row-cols-2），它基于 flex-wrap，不依赖负 margin，嵌套安全 - 别试图用
!important覆盖.row的 margin——后续升级或换主题时会连锁失效
Bootstrap 5 中 form-floating 和 grid 的冲突
.form-floating 内部用 position: absolute 定位 label，而 .col 是 flex item，高度由内容撑开。一旦 .form-floating 直接作为 .col 子元素，label 文字常悬浮在 input 上方半截，或在缩放后错位。
性能影响：每个 .form-floating 都触发额外的 layout 计算，嵌套在多层 .row 里会放大渲染延迟。
- 必须把
.form-floating放在.col内部的独立里，例如：...- 若需 label 左对齐（非浮动），放弃
.form-floating，用传统++.mb-2控制间距.form-control在.col里默认width: 100%，但.form-floating会破坏这个行为——必须显式加width: 100%到内部最易被忽略的一点：Bootstrap 的栅格不是“写上就灵”的魔法，它的每一层（container/row/col）都有明确的 CSS 作用域和副作用。跳过任意一层、或在不该嵌套的地方硬套
.row，问题往往不出在语法，而出在盒模型叠加逻辑上。 - 若需 label 左对齐（非浮动），放弃
