Bootstrap 5 移除 form-row 因其冗余，表单布局需用 row+col 组合，form-group 废弃改用间距类，水平对齐需手动分配 col，断点须显式声明，form-floating 需嵌套于 col 内，校验提示需 absolute 定位防错位。
为什么 form-row 在 Bootstrap 5 里消失了？
因为 Bootstrap 5 彻底移除了 form-row —— 它不是被“改名”，而是被设计为冗余。Grid 系统本身已足够表达表单行语义，强行加一层封装反而容易误导开发者以为它有特殊行为。
常见错误现象：form-row 类还在代码里，但样式完全没生效，输入框堆成一列；或者误以为它能自动处理 label 和 input 的对齐逻辑。
- 所有布局必须基于
row+col组合，包括表单 -
form-group也已废弃，用mb-3或自定义间距类替代 - 若需 label/input 水平对齐，得手动控制
col划分，比如col-sm-3放 label、col-sm-9放 input
如何让多字段并排又保持响应式断点？
关键不是“怎么排”，而是“在哪断”。Bootstrap 5 的断点（sm/md/lg）必须显式指定，不写就默认全屏堆叠。
使用场景：地址表单中「省」「市」「区」三个下拉框，在桌面端并排、平板竖屏时两列、手机上单列。
- 别只写
col-4：它在所有尺寸都占 1/3，小屏会挤变形 - 推荐写法：
col-sm-6 col-md-4—— 小屏起两列，中屏起三列 - 注意
row默认有负 margin，若父容器带 padding，可能造成水平滚动条
<div class="row"> <div class="col-sm-6 col-md-4"><input class="form-control" placeholder="省"></div> <div class="col-sm-6 col-md-4"><input class="form-control" placeholder="市"></div> <div class="col-sm-12 col-md-4"><input class="form-control" placeholder="区"></div> </div>
form-floating 和普通 form-control 布局冲突怎么办？
form-floating 是 Bootstrap 5 新增的浮动标签组件，但它内部用了绝对定位，和 col 的 flex 布局容易打架 —— 表现为 label 文字错位、input 高度塌陷、响应式失效。
性能影响：每个 form-floating 都额外增加一层 DOM 和 CSS 计算，嵌套在复杂 grid 里会放大渲染压力。
- 不要把
form-floating直接塞进col里再加宽度类（如col-6），它会忽略 - 正确做法：先用
col控制容器宽度，再在容器内用form-floating - 如果需要 label 左对齐（非浮动），老实用传统结构：
<label>...</label><input>+ 手动间距
自定义校验状态（invalid/valid）在 grid 里为什么不换行？
Bootstrap 5 的 is-invalid / is-valid 仅作用于 form-control 元素本身，不会影响父级 col 的布局逻辑。但错误提示 invalid-feedback 默认是 block 元素，容易撑开整行高度，导致后续字段错位。
容易踩的坑：在 row 中多个 col 并排时，某个字段触发校验失败，其下方的 invalid-feedback 把整行高度顶高，后面同排字段被“推下去”。
- 给
invalid-feedback加position-absolute+top: 100%，脱离文档流 - 确保父
col设置position-relative，否则绝对定位会相对 body 锚定 - 避免在
col上同时用mb-3和invalid-feedback，两者叠加会导致空白区域过大
