Question

我正在创建一个登录/注册表格。如果显示了登录表单，则Sign up下方有一个按钮，如果您单击它，登录表单就会消失，注册表单也会逐渐消失。然后，显示注册表单后，单击Sign in使显示登录表单。

但是，它只能运行一次。我的客户向我发送了他们购买的网站模板，并希望我进行修改。有数千行的自定义CSS文件，它是Bootstrap的自带版本（CSS和JavaScript），我不确定它们可能如何对其进行了修改。我希望问题出在我身上而不是模板上，因为那将是一场噩梦。

这是我的登录表格/动态药丸：

<!-- 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>

引导动态药丸只能工作一次？

1 个答案: