Bootstrap模态框内嵌表单输入项无法点击仅可Tab聚焦问题求助

核心问题原因 #

你遇到的输入框无法点击问题，根源是遗漏了Bootstrap模态框强制要求的modal-content层级容器。
Bootstrap模态框的标准固定结构为：

• 最外层：.modal
• 中间层：.modal-dialog
• 内容承载层：.modal-content（你当前代码未添加该容器，所有表单内容直接写在了.modal-dialog下）

.modal-content是Bootstrap绑定点击交互、处理层级事件的核心容器，缺失后点击事件会被上层遮罩或无交互属性的容器拦截，就会出现只能通过Tab键聚焦输入框、无法点击激活的异常。

修复步骤 #

1. 补充modal-content容器：在.modal-dialog的子级新增<div class="modal-content"></div>，将你现有的所有表单、布局代码全部移入该容器内部。
2. 额外优化：你当前所有输入框都使用了重复id inlineFormInputGroup，不符合HTML规范，建议修改为唯一id，避免后续出现表单提交、标签关联等异常。
3. 若修复结构后仍存在问题，检查自定义CSS是否给模态框相关元素设置了pointer-events: none属性，该属性会直接阻止元素接收点击事件。

修复后结构示例 #

<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login" aria-hidden="true">
  <div class="modal-dialog p-3 radius bg-secondary" role="document">
    <!-- 新增的modal-content容器 -->
    <div class="modal-content">
      <!-- 原有的所有布局、表单代码放到此处即可 -->
      <div class="row d-flex align-items-center justify-content-center m-2">
        <div class="col-11 formBorderBigger bg-success">
          <!-- 剩余原有代码保持不变 -->
        </div>
      </div>
    </div>
  </div>
</div>

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