form-floating 中 label 浮动后的位置由 ::placeholder 控制，实际是通过伪元素样式模拟上浮效果；需同步设置 .form-control::placeholder 的 font-size、color、opacity、line-height 和 transform，避免视觉断裂与错位。
form-floating 中 label 浮动后的位置由 ::placeholder 控制
浮动后的“标签”视觉上是 label，实际渲染主体是 input::placeholder 的文字内容——Bootstrap 用 CSS 把 placeholder 文本伪装成上浮的 label。所以改位置、大小、颜色，本质是改伪元素样式，不是直接动 .form-label。
常见错误是只写：.form-label { font-size: 1.2rem; color: #555; }，结果静止时变大变色，一聚焦就缩回默认尺寸、变灰，视觉断裂。
- 必须同步设置：
.form-control::placeholder { font-size: 1.2rem; color: #555; opacity: 1; } - Firefox 需显式声明
opacity: 1，否则 placeholder 默认半透明，浮动后标签发虚 - 深色模式下，
::placeholder默认灰度太浅，加@media (prefers-color-scheme: dark)单独调深 - 不要用
!important覆盖，优先用更具体选择器，如.form-floating .form-control::placeholder
让长 label 换行且不被截断
默认情况下，label 文字过长会溢出或撑宽容器，尤其在窄屏或 textarea 上容易被顶部边框剪掉。这不是 margin 或 padding 问题，而是 ::placeholder 的行内渲染限制。
- 给
.form-control加min-height: calc(3.5rem + 2px)（3.5rem 是 Bootstrap 默认 input 高度，+2px 补边框） - 对
textarea，必须设rows="3"或min-height，否则高度塌陷，浮动 label 直接压进内容区 - 长 label 换行需手动控制：
.form-floating label { white-space: normal; }，但仅限静止状态；浮动后仍靠::placeholder行高撑开，所以还得配line-height: 1.4 - 避免用
text-nowrap或overflow: hidden，会导致 label 文字被砍掉
垂直微调浮动 label 的上下偏移
原生浮动动画的起始/终点位置是固定的，但有时和设计稿有 1–2px 偏差，比如 label 上浮后离顶边太近，或和 border-top 间距不一致。
- 不能直接改
label的top，它在浮动时是脱离文档流的伪元素定位 - 正确方式：调整
.form-control::placeholder的transform和top，例如：transform: translateY(-0.75rem); - 若要全局统一偏移，建议用 CSS 变量：
:root { --bs-floating-label-offset: -0.75rem; }，再在伪元素里引用transform: translateY(var(--bs-floating-label-offset)); - 注意：这个偏移值会影响所有
form-floating，包括select（虽然它没真正动画，但定位也受此影响）
为什么 form-select 的 label 看起来“卡住不动”？
select 元素没有 :placeholder-shown 伪类，Bootstrap 只能靠绝对定位把 label 压进控件区域顶部，它不响应输入状态变化，因此没有上浮/回落动画。这不是 bug，是浏览器能力限制。
- 别试图用 JS 强制触发
focus事件来模拟浮动——无效，因为缺少 placeholder 判断依据 - 若坚持用
form-floating包裹select，请确保第一个option是disabled selected，如：<option selected disabled>请选择</option>，否则 label 会覆盖默认选中项文字 - 想真有浮动效果？只能换方案：用自定义下拉（如基于
div+ul实现），或放弃浮动，改用传统label+select垂直布局 - 切记：
type="file"和复选框/单选框完全不支持form-floating，硬套会导致 label 错位或不可见
::placeholder 绑定在一起。最常被忽略的是：改了 font-size 却没同步调 line-height 和 transform 偏移，导致不同字号下 label 浮动后上下错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
