0

我正在创建一个登录/注册表单。如果显示登录表单，则下方有一个按钮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;
  }
}

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

4

1 回答 1

0

我注释掉了container和flexdiv 并解决了问题。

<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>
于 2018-07-25T20:21:58.100 回答