Bootstrap 5.3.0 alpha3浮动标签输入框无法点击问题求助

问题根源 #

Bootstrap 5.3.0 alpha3对form-floating组件的CSS布局逻辑做了调整，浮动标签（<label>）的默认层级或尺寸设置导致其覆盖了输入框（<input>）的部分区域，点击这些被覆盖的区域时，事件会被标签拦截，无法触发输入框的聚焦。

可行解决方案 #

1. 自定义CSS修复点击穿透 #

添加以下自定义CSS，让标签不拦截点击事件，直接将点击传递给下方的输入框：

.form-floating > label {
  pointer-events: none;
}

如果上述方法无效，也可以调整标签的层级，确保输入框在视觉层级上位于标签上方：

.form-floating > .form-control {
  z-index: 1;
}
.form-floating > label {
  z-index: 0;
}

2. 校验HTML结构合规性 #

确保form-floating的HTML结构严格遵循Bootstrap规范：容器内必须先放置<input>/<textarea>，再放置<label>，示例正确结构如下：

<div class="form-floating">
  <input type="text" class="form-control" id="floatingText" placeholder="Enter text">
  <label for="floatingText">Text Input</label>
</div>

若结构颠倒（先标签后输入框），在alpha3版本中极易出现层级冲突导致点击异常。

3. 版本回退或等待官方修复 #

由于当前使用的是alpha测试版本，这类布局bug属于常见的测试阶段问题。如果项目对稳定性要求较高，可暂时回退到5.3.0 alpha1版本；或者关注Bootstrap后续的版本更新，官方大概率会在beta或正式版中修复该问题。

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