label必须紧接input后且input需含placeholder属性，form-floating容器和form-control类不可省略，select和file不支持真正浮动，长标签需手动设置white-space和min-height。
label 必须紧接在
后面，且
必须带
Bootstrap 5 的浮动逻辑依赖 CSS 相邻兄弟选择器（
）和
伪类，
必须紧跟在
或
之后才能被样式捕获。顺序错了或中间有空格、注释、其他标签，浮动就失效。
常见错误现象：
写在
前 → 标签卡在输入框内部不动
没写
属性 → 标签不浮动，甚至完全不可见（哪怕 JS 动态设值也无用）
JS 清空
后没同步重置
→ 标签浮着但输入框为空，状态错乱
正确写法示例：
注意：
内容可以为空（
），但属性本身不能省。
容器必须包裹整个结构，且控件需含
类
漏掉
外层容器，或漏掉
（或
），会导致样式塌陷：边框消失、字体变小、聚焦无反馈、浮动动画不触发。
使用场景中容易忽略的点：
要用
，不是
必须加
（如
），否则高度不可控，浮动标签可能被截断
不要给
容器手动加
或
—— 用 Bootstrap 工具类如
错误示范：
（缺
包裹）→ 标签永远不浮动。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
和
类型不支持真正浮动动画
元素没有原生
，Bootstrap 只能靠定位把
“压”进顶部，不会随聚焦或选中变化而上浮；
则因
不触发，
始终卡在下方，硬套
会出视觉 bug。
可行做法：
对
，保留
结构，但加一个
的默认项（如
）增强语义
对
输入，直接放弃
，改用传统
+
组合，或自定义按钮触发
别指望
/
能浮动——它们压根不在
支持列表里
长标签换行与高度适配要改
和控件
默认情况下，过长的
文字会被截断或撑破容器。Bootstrap 不自动处理多行，得手动加 CSS。
关键调整点：
给
加
和
，启用换行
给
设
（≈ 两行文字 + 输入区），同时保持
别只调
字体大小——浮动时显示的是
的内容，所以
的
和
也要同步改
最易被忽略的细节：多行
在聚焦后若控件高度不够，会把文字“顶出去”，看起来像标签消失了。这时候光调
没用，必须确保控件本身有足够垂直空间。
inputinputplaceholder+:placeholder-shownlabelinputtextarealabelinputinputplaceholdervalueplaceholder
placeholderplaceholder=""form-floatingform-control.form-floating.form-control.form-selectselect.form-select.form-controltextarearowsrows="3"form-floatingmarginpaddingmb-3form-floatingselectfileselectplaceholderlabeltype="file":placeholder-shownlabelform-floatingselectform-floatingdisabled selectedfileform-floatinglabelinputcheckboxradioform-floating::placeholdermin-heightlabel.form-floating > labelwhite-space: normalline-height: 1.4.form-floating .form-controlmin-height: 3.5remheight: auto.form-label::placeholderinput::placeholderfont-sizecolorlabellabel