form-floating长标签换行错位是因label绝对定位依赖固定transform偏移和容器高度，需同步设置min-height、white-space:normal、padding-top及line-height才能对齐。
form-floating 标签文字过长时默认不换行，直接溢出或被裁剪——这不是 bug，是 Bootstrap 原生设计假设标签简短（如 “Email”）。强行加 white-space: normal 会错位，不设高度则多行标签压住输入框。必须同步控制容器高度、标签换行行为与视觉对齐。
为什么 form-floating 长标签一换行就错位
Bootstrap 把 label 设为 position: absolute，靠固定 transform: translateY() 上浮；它依赖父容器有稳定高度。一旦标签换行：
-
label高度变大，但transform偏移量没变，导致上浮后底部压进输入框 - 父容器（
.form-floating）若没设最小高度，会被压缩，进一步加剧重叠 -
padding-top不足时，多行文本顶部紧贴边框，视觉拥挤
用 min-height + white-space: normal 稳住布局
这是最轻量、无侵入的解法，不改 HTML 结构，不破坏浮动逻辑（聚焦动画、验证状态联动全保留）：
.form-floating > .form-control,
.form-floating > .form-select {
min-height: calc(3.5rem + 2px);
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.form-floating > label {
white-space: normal;
line-height: 1.4;
padding-top: 0.25rem;
}
-
min-height必须显式设置，height: auto单独用不够——form-floating容器需先有“底座”才能撑开 -
padding-top: 1.5rem是关键：确保上浮后的多行label有足够垂直空间，不压控件边框 - 别只加
white-space: normal，不调line-height和padding-top，多行会挤在一起
移动端窄列下还要防标签撑破容器
在 col-sm-6 或小屏中，长标签即使换行，也可能因宽度失控导致整体布局变形：
- 给
label加max-width: 100%，防止超宽文本横向拉伸父容器 - 避免对
.form-floating外层加width: 100%或flex: 1同时又不限制子项宽度——这会让换行失效 - 若标签含长 URL 或 UUID，
white-space: normal仍可能不断行，此时需额外加word-break: break-word到label上
真正麻烦的不是换行本身，而是换行后 label 的定位偏移量和父容器高度不再匹配——所有样式调整都得围绕这个前提做校准，漏掉 padding-top 或 min-height 中任意一个，视觉就会出问题。
