Bootstrap 5中浮动标签（Floating Labels）怎么用？

label必须置于input后且input需含placeholder，否则浮动失效；select无真正浮动动画，textarea正常；form-control类不可少；::placeholder样式需同步调整以避免视觉断裂。label 必须放在 input 后面，且 input 必须带 placeholder这是最常翻车的第一步：很多人照着 Bootstrap 4 的习惯把 label 写在 input 前面，结果标签死活不浮动——Bootstrap 5 的浮动逻辑依赖 CSS 的 +（相邻兄弟选择器）和 :placeholder-shown 伪类，label 必须紧接在 input 或 textarea 之后才能被样式捕获。同时，placeholder 属性**必须存在**，哪怕内容为空（placeholder=""），否则浮动动画不会触发。浏览器靠它判断“输入框是否为空”，从而决定标签是否该上浮。label 在 input 之前 → 标签卡在框内不动input 缺少 placeholder → 标签不浮动，甚至可能完全不可见用 JavaScript 动态清空值后没重置 placeholder → 浮动状态错乱（比如值为空但标签还浮着）select 和 textarea 也能用，但行为有差异select 元素支持 form-floating，但它的“浮动”是假的：标签不会随聚焦或输入而动画，而是始终固定在左上角，仅靠容器定位模拟效果；textarea 则完全正常，和 input 行为一致。这是因为 select 没有原生 placeholder 属性，Bootstrap 只能靠 CSS 把 label 压进控件区域顶部，无法监听输入状态变化。所以别指望下拉框有真正的浮动动画。对 select，建议加 disabled 的默认 option（如 <option selected disabled>请选择</option>）来增强语义textarea 的 placeholder 会随高度自适应，但若设了 rows 或固定 height，要留意标签是否被截断所有浮动标签都依赖 form-control 类，漏掉会导致样式塌陷（比如边框消失、字体变小）自定义颜色/大小时，别只改 label，还要动 placeholder浮动后的标签其实是靠 input::placeholder 的文字撑起来的，所以改 .form-label 的 font-size 或 color 只影响静止状态；真正浮动时显示的“标签文字”，其实是 ::placeholder 的内容——它被 CSS 伪装成标签。 Tellers AI Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。