如何隐藏Bootstrap 5 form-floating输入框外显示的标签？

要让form-floating组件的标签正常显示在输入框内部，核心是遵循Bootstrap的组件结构要求，同时排查常见的布局错误：

1. 使用正确的组件结构 #

form-floating要求输入框和标签必须放在同一个.form-floating容器内，且输入框要在标签之前，同时输入框需要设置placeholder（即使为空字符串）。示例代码：

<div class="form-floating mb-3">
  <input type="text" class="form-control" id="floatingText" placeholder="">
  <label for="floatingText">输入内容</label>
</div>

2. 排查常见错误 #

如果标签仍显示在外部，通常是以下问题导致：

• 结构顺序错误：将<label>放在<input>前面，破坏了Bootstrap的浮动样式逻辑
• 缺少placeholder属性：输入框没有占位符时，无法触发标签的浮动动画
• 自定义CSS冲突：如果给输入框或容器添加了position: static、z-index等样式，可能覆盖组件的默认布局

3. 若需完全隐藏标签 #

如果是要彻底隐藏标签（而非让它回到输入框内），推荐使用Bootstrap官方的辅助类，保证屏幕阅读器可访问性：

<div class="form-floating mb-3">
  <input type="text" class="form-control" id="floatingHiddenLabel" placeholder="输入内容">
  <label for="floatingHiddenLabel" class="visually-hidden">输入内容</label>
</div>

内容的提问来源于stack exchange，提问作者Kelvin