Bootstrap 动态药丸只管用一次?
Bootstrap dynamic pills only work once?
我正在创建一个 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;
}
}
如有任何帮助,我们将不胜感激。如果需要更多详细信息,请告诉我。谢谢。
我注释掉了 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>
我正在创建一个 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;
}
}
如有任何帮助,我们将不胜感激。如果需要更多详细信息,请告诉我。谢谢。
我注释掉了 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>