form-floating 中 label 过长应设 white-space: normal 并调整 padding 和 min-height；超两行建议改用水平表单；label 宽度优先用 col-auto + text-end，避免固定 width 或误用 input-group。
form-floating 中 label 过长被截断或错位
默认 form-floating 的 label 启用 white-space: nowrap，且容器高度固定（height: 3.5rem），长文本直接溢出或换行后与输入框脱节。
- 加
.form-floating > label { white-space: normal; line-height: 1.4; padding-top: 0.25rem; } - 给控件设
min-height: calc(3.5rem + 2px); padding-top: 1.5rem; padding-bottom: 0.5rem;，留足 label 上浮空间 - 避免用
position: absolute手动调位置——会破坏form-floating的 JS 行为（如聚焦上浮、验证状态联动） - 若 label 超过两行，建议改用普通水平表单（
row + col-*），form-floating本就不适合长描述性标签
水平表单中 label 文字长度差异大，列宽难统一
用 col-sm-3 包 label 再右对齐，看似简单，但“姓名”和“用户实名认证绑定手机号”放同一列宽下，前者留白过大，后者仍换行。
- 优先用
col-auto包label+text-end，让 label 宽度由文字撑开，输入框用col自适应剩余空间 - 当
col-auto在小屏下撑太宽（如 md 断点内 label 过长），换成固定列宽如col-md-2，并搭配text-truncate或text-wrap - 禁用
style="width: 120px"直接写死label宽度——它会让 label 脱离文档流，响应式失效，小屏时 label 和 input 容易错行
用 input-group 当 label 容器导致对齐崩溃
把 span 套 input-group-text 当标签，再跟 input 放一起，是常见误用。结果是 label 长度一变，后面所有输入框起始位置全偏移。
-
input-group不是布局工具，只负责内部紧凑连接，不提供跨行对齐能力 - 正确做法：每个 label+input 组合放进独立
div class="row align-items-center"，label 用col-auto，input 用col - 如果必须带前缀/后缀（如 “¥” 或 “.com”），把
input-group放进col内部，别让它当 row 的直接子元素
label 换行后和 input 视觉不对齐
即使用了 white-space: normal，label 多行后底部和 input 内容区中线常不重合，尤其在 font-size 或 line-height 不一致时。
- 关键不是调
label的 margin，而是确保row是 flex 容器且加align-items-center - 检查是否所有元素都是
row的**直接子元素**——中间插了div或form就会断掉 flex 对齐 - 不要依赖
form-group（Bootstrap 5 已弃用其布局功能），它现在只是语义容器，无对齐作用
form-floating 样式。
