Bootstrap 动态药丸只管用一次？

Question

我正在创建一个 Sign in/up 表单。如果显示登录表单，则 Sign up 下方有一个按钮，如果单击它，则登录表单淡出，注册表单淡入。一旦显示注册表单，单击 Sign in 将显示登录表单。

但是，它只能工作一次。我的客户给我发了一个他们购买的网站模板，希望我修改。有数千行的自定义 CSS 文件，它带有自己的 Bootstrap 版本（CSS 和 JavaScript），我不确定它们是如何修改的它。我希望问题是我而不是模板，因为那将是一场噩梦。

这是我的登录信息form/dynamic pill:

<!-- SIGN IN/UP FORM -->
        <div class="form-custom text-center container bg-white">
            <img src="images/logo.png" alt="">

            <!-- TAB CONTENT -->
            <div class="tab-content">
                <div id="signin" class="tab-pane fade in active">
                    <!--SIGN IN-->
                    <form action="" method="post" class="mb-3">
                        <div class="container px-4">
                            <input class="form-style" type="email" name="email" placeholder="Email">
                            <input class="form-style" type="password" name="password" placeholder="Password">
                        </div>
                    </form>
                    <!--SIGN IN-->
                </div>

                <div id="signup" class="tab-pane fade">
                    <!--SIGN UP-->
                    <form action="" method="post" class="mb-3">
                        <div class="container px-4">
                            <input class="form-style" type="text" name="first_name" placeholder="First Name">
                            <input class="form-style" type="text" name="last_name" placeholder="Last Name">
                            <input class="form-style" type="email" name="email" placeholder="Email">
                            <input class="form-style" type="password" name="password" placeholder="Password">
                        </div>
                    </form>
                    <!--SIGN UP-->
                </div>
            </div>
            <!-- TAB CONTENT -->

              <ul class="nav nav-pills">
                 <div class="container">
                  <div class="d-flex flex-row justify-content-center">
                      <li class="active">
                            <button data-toggle="pill" href="#signin" class="btn btn-sign">Sign in</button>
                       </li>
                       <li>
                            <button data-toggle="pill" href="#signup" class="btn btn-sign">Sign up</button>
                       </li>
                  </div>
                </div>
             </ul>
        </div>
        <!-- SIGN IN/UP FORM -->

然后是我自己的风格类编译自Sass:

.form-custom {
  position: absolute;
  top: 35vh;
  left: calc(90vw - 475px);
  width: 475px;
  z-index: 5000;
}
@media (max-width: 575.98px) {
  .form-custom {
    width: 420px;
    left: calc(90vw - 420px);
  }
}
@media (max-width: 500px) {
  .form-custom {
    width: 375px;
    left: calc(90vw - 375px);
  }
}
@media (max-width: 400px) {
  .form-custom {
    width: 275px;
    left: calc(90vw - 275px);
  }
}

.form-style {
  display: block;
  width: 100%;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  font-size: 1rem;
}

.form-style:focus {
  outline-color: transparent;
}

.btn-sign {
  display: inline;
  margin: 0px 20px 0px 20px;
  border-radius: 0px;
  width: 180px;
}
@media (max-width: 575.98px) {
  .btn-sign {
    width: 162px;
  }
}
@media (max-width: 500px) {
  .btn-sign {
    width: 126px;
  }
}
@media (max-width: 400px) {
  .btn-sign {
    width: 90px;
  }
}

如有任何帮助，我们将不胜感激。如果需要更多详细信息，请告诉我。谢谢。

Answer 1

我注释掉了 container 和 flex div，这解决了问题。

<ul class="nav nav-pills">
      <li class="active">
           <button data-toggle="pill" href="#signin" class="btn btn-sign">Sign in</button>
      </li>
      <li>
            <button data-toggle="pill" href="#signup" class="btn btn-sign">Sign up</button>
      </li>
</ul>

Bootstrap 动态药丸只管用一次？

Bootstrap dynamic pills only work once?

css

sass

bootstrap-4

nav-pills