模态内的表单输入不可点击

Question

所以我刚刚开始使用 bootstrap 的模式，并且我在不同的页面上有一个 register/login 作为索引。我认为模态可能是个好主意，我尝试将 login/register 表单导入模态，但知道它在模态内部，所有输入都不可点击，但如果我按下选项卡，我会进入输入内部.当然，我忘记了一些东西，但我不知道，因为我正在将它与模态示例进行比较，我没有发现任何遗漏。

我的模态代码：

<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">
    <div class="row d-flex align-items-center justify-content-center m-2">
      <div class="col-11 formBorderBigger bg-success">
        <div class="row d-flex justify-content-center align-items-center">
          <div class="col">
            <div class="row">
              <div class="col">
                <h2 class="text-center text-white p-2">INICIAR SESIÓN</h2>
              </div>
            </div>
          </div>
        </div>
        <div class="row d-flex justify-content-center align-items-center">
          <div class="col-11 formBorderBigger my-2 bg-primary">
            <div class="row d-flex justify-content-center align-items-center">
              <div class="col-11 bg-white my-4 py-3 formBorderSmaller ">
                <form>
                  <div class="row d-flex justify-content-center align-items-center">
                    <div class="col-12">
                      <div class="form-group row">
                        <div class="col-12 justify-content-center align-items-center">
                          <div class="row justify-content-center align-items-center">
                            <div class="col py-2 justify-content-center align-items-center">
                              <div class="input-group mb-2">
                                <div class="input-group-prepend">
                                  <div class="input-group-text"><i class="bi bi-person-fill"></i></div>
                                </div>
                                <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Nombre">
                              </div>
                            </div>
                          </div>
                          <div class="row justify-content-center align-items-center">
                            <div class="col py-2 justify-content-center align-items-center">
                              <div class="input-group mb-2">
                                <div class="input-group-prepend">
                                  <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
                                </div>
                                <input type="password" class="form-control" id="inlineFormInputGroup" placeholder="Contraseña">
                              </div>
                            </div><br>
                          </div>
                        </div>
                        <div class="col-12">
                          <div class="row d-flex justify-content-center align-items-center py-2">
                            <div class="col">
                              <h2 class="text-center">Captcha</h2>
                            </div>
                          </div>
                          <div class="row d-flex justify-content-center align-items-center py-2">
                            <div class="col d-flex justify-content-center align-items-center">
                              <div class="captcha bg-black py-2"></div>
                            </div>
                          </div>
                          <div class="row d-flex justify-content-center align-items-center py-2">
                            <div class="col d-flex justify-content-center align-items-center">

                              <div class="input-group mb-2">
                                <div class="input-group-prepend">
                                  <div class="input-group-text"><i class="bi bi-arrow-clockwise"></i></div>
                                </div>
                                <input type="text" class="form-control" id="inlineFormInputGroup">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="row d-flex justify-content-center align-items-center py-2">
                          <div class="col-5 d-flex justify-content-center align-items-center">
                            <button class="btn text-white btn-nav rounded-1" type="submit">Entrar</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这对我有用：

Gif of how it works.

Answer 1

您需要将 .modal-content class 添加到模态：

<!-- Modal Login -->
<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">
    <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 class="row d-flex justify-content-center align-items-center">
            <div class="col">
              <div class="row">
                <div class="col">
                  <h2 class="text-center text-white p-2">INICIAR SESIÓN</h2>
                </div>
              </div>
            </div>
          </div>
          <div class="row d-flex justify-content-center align-items-center">
            <div class="col-11 formBorderBigger my-2 bg-primary">
              <div class="row d-flex justify-content-center align-items-center">
                <div class="col-11 bg-white my-4 py-3 formBorderSmaller ">
                  <form>
                    <div class="row d-flex justify-content-center align-items-center">
                      <div class="col-12">
                        <div class="form-group row">
                          <div class="col-12 justify-content-center align-items-center">
                            <div class="row justify-content-center align-items-center">
                              <div class="col py-2 justify-content-center align-items-center">
                                <div class="input-group mb-2">
                                  <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="bi bi-person-fill"></i></div>
                                  </div>
                                  <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Nombre">
                                </div>
                              </div>
                            </div>
                            <div class="row justify-content-center align-items-center">
                              <div class="col py-2 justify-content-center align-items-center">
                                <div class="input-group mb-2">
                                  <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
                                  </div>
                                  <input type="password" class="form-control" id="inlineFormInputGroup" placeholder="Contraseña">
                                </div>
                              </div><br>
                            </div>
                          </div>
                          <div class="col-12">
                            <div class="row d-flex justify-content-center align-items-center py-2">
                              <div class="col">
                                <h2 class="text-center">Captcha</h2>
                              </div>
                            </div>
                            <div class="row d-flex justify-content-center align-items-center py-2">
                              <div class="col d-flex justify-content-center align-items-center">
                                <div class="captcha bg-black py-2"></div>
                              </div>
                            </div>
                            <div class="row d-flex justify-content-center align-items-center py-2">
                              <div class="col d-flex justify-content-center align-items-center">

                                <div class="input-group mb-2">
                                  <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="bi bi-arrow-clockwise"></i></div>
                                  </div>
                                  <input type="text" class="form-control" id="inlineFormInputGroup">
                                </div>
                              </div>
                            </div>

                          </div>
                          <div class="row d-flex justify-content-center align-items-center py-2">
                            <div class="col-5 d-flex justify-content-center align-items-center">
                              <button class="btn text-white btn-nav rounded-1" type="submit">Entrar</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Fin Modal Login -->

模态内的表单输入不可点击

Inputs of form inside modal are not clickable

html

javascript

bootstrap-modal

bootstrap-4

bootstrap-5