Bootstrap 5.2中form-floating输入框placeholder不显示

使用Bootstrap 5.2搭建表单页面时，在form-floating浮动标签布局下的输入框已正确写入placeholder属性，但实际渲染后空输入框始终不显示占位提示，Chrome开发者工具中可确认DOM节点的placeholder属性已正常生成。
涉及的代码片段如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<div class="row mb-2">
  <div class="col-sm-12 form-floating">
    <input type="text" class="form-control d-flex" id="Company_Name" name="Company_Name" placeholder="ACME, Inc.">
    <label for="Company_Name">Company Name</label>
  </div>
</div>
<div class="row mb-2">
  <div class="col-sm-12 form-floating">
    <input type="text" class="form-control d-flex" id="Company_Website" name="Company_Website" placeholder="www.acme.com">
    <label for="Company_Website">Website</label>
  </div>
</div>
<div class="row mb-2">
  <div class="col-sm-12 form-floating">
    <input type="text" class="form-control d-flex" id="Contact_Person" name="Contact_Person" placeholder="Joe Smith">
    <label for="Contact_Person">Contact Person</label>
  </div>
</div>
<div class="row mb-2">
  <div class="col-sm-12 form-floating">
    <input type="text" class="form-control d-flex" id="Company_Email" name="Company_Email" placeholder="joesmith@acme.com">
    <label for="Company_Email">Company Email</label>
  </div>
</div>
<div class="row mb-2">
  <div class="col-sm-4 form-floating">
    <input type="text" class="form-control d-flex" id="Company_Telephone" name="Company_Telephone" placeholder="999-999-9999" />
    <label for="Company_Telephone">Contact Telephone :</label>
  </div>
</div>

实际渲染效果：

该问题由两个因素共同导致：

• form-floating是Bootstrap的官方浮动标签组件，默认设计逻辑为：输入框无内容且未聚焦时，标签直接覆盖在输入框上层，原生placeholder默认隐藏；只有输入框聚焦、或已填入内容时，标签上浮缩小，才会露出placeholder，属于组件默认交互逻辑，不是代码错误。
• 所有form-control输入框上额外添加的d-flex类破坏了组件内置样式：form-floating下的输入框默认display属性为block，强行改为flex布局后打乱了输入框和label的层级、定位关系，导致label完全遮挡输入框，哪怕聚焦时placeholder也无法正常显示。

按以下步骤修复即可：

• 第一步：移除所有输入框上多余的d-flex类，form-control类已经自带布局所需的全部样式，不需要额外添加flex布局类。
• 第二步：如果需要实现输入框无内容未聚焦时也显示自定义placeholder的效果（即覆盖Bootstrap默认交互），添加一段自定义CSS即可：

/* 空值未聚焦状态下隐藏浮动标签，显示placeholder */
.form-floating > .form-control:placeholder-shown:not(:focus) + label {
  opacity: 0;
}
.form-floating > .form-control:placeholder-shown:not(:focus)::placeholder {
  opacity: 1;
}

• 注意事项：form-floating组件本身要求输入框必须携带placeholder属性（哪怕属性值为空）才能正常触发标签浮动效果，现有代码中的placeholder属性写法完全正确，不需要修改。

修复后交互逻辑为：输入框为空且未聚焦时显示设置的placeholder提示，点击输入框聚焦、或输入内容后，placeholder隐藏，标签上浮到输入框顶部，符合浮动标签的标准交互。

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