如何解决Bootstrap 5中Floating Label与Input Group共用时标签被隐藏的问题

问题原因 #

• 你当前将form-floating与input-group两个类绑定在同一个DOM容器上，Bootstrap 5 原生的浮动标签样式规则与输入组的布局规则存在冲突，输入框获得焦点时标签上浮的样式无法被正确触发，视觉上表现为标签消失。

修复方法 #

调整DOM嵌套结构，将input-group作为外层容器，form-floating作为内层容器包裹input和label标签，输入组的前后缀元素和form-floating容器平级放置即可。需要给form-floating添加flex-grow-1类，让其撑满输入组的剩余可用宽度，避免布局错位。

修正后可运行代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!-- 正常协同的组合用法 -->
<div class="input-group mb-3">
  <div class="form-floating flex-grow-1">
    <input type="text" class="form-control" id="code1" placeholder="Code 1">
    <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text">❌</span>
</div>

<!-- 单独使用的浮动标签 原有逻辑保持不变 -->
<div class="form-floating mb-3">
    <input type="text" class="form-control" id="code4" placeholder="Code 4">
    <label for="code4">Code 4</label>
</div>

调整后输入框获得焦点、存在输入内容时，标签都会正常上浮显示，输入组的后缀元素也会正常渲染，两个组件的功能均可正常使用。

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