如何修复 Bootstrap 使其不会弄乱登录表单和页脚？
Posted
技术标签:
【中文标题】如何修复 Bootstrap 使其不会弄乱登录表单和页脚？【英文标题】：How can the Bootstrap be fixed so that it doesn't mess up the Signin Form and the Footer? 【发布时间】：2021-04-23 07:20:30 【问题描述】：这是对我上一个问题的跟进，但我最近在主页上的页脚格式和单独页面上的登录表单方面遇到了一些麻烦。页面顶部的引导程序似乎在某种程度上弄乱了它们？但它不会影响任何其他元素。我该如何解决这个问题？
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="icon" href="https://drive.google.com/uc?id=15DKhs1-y_c6C5TXfbQ1es1cJYwItjKkQ" sizes="32x32" type="image/png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<body>
<footer class="mainfooter" role="contentinfo">
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Solutions</h4>
<ul class="list-unstyled">
<li><a href="#"></a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Influencers</a></li>
<li><a href="#">Partnerships</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Useful Links</h4>
<ul class="list-unstyled">
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Cookie Collection</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Company</h4>
<ul class="list-unstyled">
<li><a href="#">About</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Values</a></li>
<li><a href="#">Blog</a></li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<h4>Connect</h4>
<ul class="list-unstyled">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Discord</a></li>
<li><a href="#">Reddit</a></li>
<li>
<a href="#"></a>
</li>
</ul>
<!-- SOCIAL MEDIA
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
-->
</div>
</div>
<div class="row">
<div class="col-md-12 copy">
<p class="text-center">© Copyright 2021 - website. All rights reserved.</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
style.css：
/*FOOTER*/
footer
background: #ebf4fa;
/* background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
background: linear-gradient(59deg, #3A6073, #16222A); */
color: white;
margin-top: 0px;
font-family: 'Poppins', sans-serif;
footer a
color: #818494;
font-size: 14px;
transition-duration: 0.2s;
footer a:hover
color: #007bff;
text-decoration: none;
.copy
font-size: 12px;
padding: 10px;
border-top: 1px solid #030929;
.footer-middle
padding-top: 2em;
color: #030929;
/* LOGIN */
/* FORM */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
*
margin: 0;
padding: 0;
box-sizing: border-box;
body,
input
font-family: "Poppins", sans-serif;
.container
margin-top: 8vh;
position: relative;
width: 100%;
background-color: #fff;
min-height: 100vh;
overflow: hidden;
.forms-container
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
.signin-signup
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 75%;
width: 50%;
transition: 1s 0.7s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 5;
form
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
form.sign-up-form
opacity: 0;
z-index: 1;
form.sign-in-form
z-index: 2;
.title
font-size: 2.2rem;
color: #444;
margin-bottom: 10px;
.input-field
max-width: 380px;
width: 100%;
background-color: #f0f0f0;
margin: 10px 0;
height: 55px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
.input-field i
text-align: center;
line-height: 55px;
color: #acacac;
transition: 0.5s;
font-size: 1.1rem;
.input-field input
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #333;
.input-field input::placeholder
color: #aaa;
font-weight: 500;
.social-text
padding: 0.7rem 0;
font-size: 1rem;
.social-media
display: flex;
justify-content: center;
.btn
width: 150px;
background-color: #00BFFF;
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
.btn:hover
background-color: #11aadd;
.panels-container
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
.container:before
content: "";
position: absolute;
height: 2000px;
width: 2000px;
top: -10%;
right: 48%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, #00BFFF 0%, #04befe 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;
.image
width: 100%;
transition: transform 1.1s ease-in-out;
transition-delay: 0.4s;
.panel
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
.left-panel
pointer-events: all;
padding: 3rem 17% 2rem 12%;
.right-panel
pointer-events: none;
padding: 3rem 12% 2rem 17%;
.panel .content
color: #fff;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
.panel h3
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
.panel p
font-size: 0.95rem;
padding: 0.7rem 0;
.btn.transparent
margin: 0;
background: none;
border: 2px solid #fff;
width: 130px;
height: 41px;
font-weight: 600;
font-size: 0.8rem;
.right-panel .image,
.right-panel .content
transform: translateX(800px);
/* ANIMATION */
.container.sign-up-mode:before
transform: translate(100%, -50%);
right: 52%;
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content
transform: translateX(-800px);
.container.sign-up-mode .signin-signup
left: 25%;
.container.sign-up-mode form.sign-up-form
opacity: 1;
z-index: 2;
.container.sign-up-mode form.sign-in-form
opacity: 0;
z-index: 1;
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content
transform: translateX(0%);
.container.sign-up-mode .left-panel
pointer-events: none;
.container.sign-up-mode .right-panel
pointer-events: all;
@media (max-width: 870px)
.container
min-height: 800px;
height: 100vh;
.signin-signup
width: 100%;
top: 95%;
transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;
.signin-signup,
.container.sign-up-mode .signin-signup
left: 50%;
.panels-container
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
.panel
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2;
.right-panel
grid-row: 3 / 4;
.left-panel
grid-row: 1 / 2;
.image
width: 200px;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
.panel .content
padding-right: 15%;
transition: transform 0.9s ease-in-out;
transition-delay: 0.8s;
.panel h3
font-size: 1.2rem;
.panel p
font-size: 0.7rem;
padding: 0.5rem 0;
.btn.transparent
width: 110px;
height: 35px;
font-size: 0.7rem;
.container:before
width: 1500px;
height: 1500px;
transform: translateX(-50%);
left: 30%;
bottom: 68%;
right: initial;
top: initial;
transition: 2s ease-in-out;
.container.sign-up-mode:before
transform: translate(-50%, 100%);
bottom: 32%;
right: initial;
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content
transform: translateY(-300px);
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content
transform: translateY(0px);
.right-panel .image,
.right-panel .content
transform: translateY(300px);
.container.sign-up-mode .signin-signup
top: 5%;
transform: translate(-50%, 0);
@media (max-width: 570px)
form
padding: 0 1.5rem;
.image
display: none;
.panel .content
padding: 0.5rem 1rem;
.container
padding: 1.5rem;
.container:before
bottom: 72%;
left: 50%;
.container.sign-up-mode:before
bottom: 28%;
left: 50%;
signin.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/64d58efce2.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="signin.css" />
<title>Login & Sign up Form</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- NAVBAR -->
<nav>
<input id="nav-toggle" type="checkbox">
<!-- <div class="logo">logo</div> -->
<a href="index.html"><img class="logo" src="logo.png"></a>
<ul class="links">
<li><a href="index.html#home">Home</a></li>
<li><a href="index.html#problem">Problem</a></li>
<li><a href="index.html#features">Features</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="signin.html">Login</a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<!-- SIGNIN -->
<div class="container">
<div class="forms-container">
<div class="signin-signup">
<form action="#" class="sign-in-form">
<h2 class="title">Login</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" />
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" />
</div>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Login with social platforms</p>
<div class="social-media">
<a href="#" class="social-icon">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-google"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</form>
<form action="#" class="sign-up-form">
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" />
</div>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Email" />
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" />
</div>
<input type="submit" class="btn" value="Sign up" />
<p class="social-text">Or Sign up with social platforms</p>
<div class="social-media">
<a href="#" class="social-icon">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-google"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</form>
</div>
</div>
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>New here ?</h3>
<p>
We're your go-to platform for ___
</p>
<button class="btn transparent" id="sign-up-btn">
Sign up
</button>
</div>
<img src="log.svg" class="image" />
</div>
<div class="panel right-panel">
<div class="content">
<h3>One of us ?</h3>
<p>
We're glad that you value __.
</p>
<button class="btn transparent" id="sign-in-btn">
Login
</button>
</div>
<img src="register.svg" class="image" />
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
signin.css：
/* navbar code carried over from previous file */
/*FOOTER*/
footer
background: #ebf4fa;
/* background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
background: linear-gradient(59deg, #3A6073, #16222A); */
color: white;
margin-top: 0px;
font-family: 'Poppins', sans-serif;
footer a
color: #818494;
font-size: 14px;
transition-duration: 0.2s;
footer a:hover
color: #007bff;
text-decoration: none;
.copy
font-size: 12px;
padding: 10px;
border-top: 1px solid #030929;
.footer-middle
padding-top: 2em;
color: #030929;
/*SOCİAL İCONS*/
/* footer social icons */
ul.social-network
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0;
ul.social-network li
display: inline;
margin: 0 5px;
/* LOGIN */
/* FORM */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
*
margin: 0;
padding: 0;
box-sizing: border-box;
body,
input
font-family: "Poppins", sans-serif;
.container
margin-top: 8vh;
position: relative;
width: 100%;
background-color: #fff;
min-height: 100vh;
overflow: hidden;
.forms-container
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
.signin-signup
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 75%;
width: 50%;
transition: 1s 0.7s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 5;
form
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
form.sign-up-form
opacity: 0;
z-index: 1;
form.sign-in-form
z-index: 2;
.title
font-size: 2.2rem;
color: #444;
margin-bottom: 10px;
.input-field
max-width: 380px;
width: 100%;
background-color: #f0f0f0;
margin: 10px 0;
height: 55px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
.input-field i
text-align: center;
line-height: 55px;
color: #acacac;
transition: 0.5s;
font-size: 1.1rem;
.input-field input
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #333;
.input-field input::placeholder
color: #aaa;
font-weight: 500;
.social-text
padding: 0.7rem 0;
font-size: 1rem;
.social-media
display: flex;
justify-content: center;
.social-icon
height: 46px;
width: 46px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0.45rem;
color: #333;
border-radius: 50%;
border: 1px solid #333;
text-decoration: none;
font-size: 1.1rem;
transition: 0.3s;
.social-icon:hover
color: #00BFFF;
border-color: #00BFFF;
.btn
width: 150px;
background-color: #00BFFF;
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
.btn:hover
background-color: #11aadd;
.panels-container
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
.container:before
content: "";
position: absolute;
height: 2000px;
width: 2000px;
top: -10%;
right: 48%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, #00BFFF 0%, #04befe 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;
.image
width: 100%;
transition: transform 1.1s ease-in-out;
transition-delay: 0.4s;
.panel
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
.left-panel
pointer-events: all;
padding: 3rem 17% 2rem 12%;
.right-panel
pointer-events: none;
padding: 3rem 12% 2rem 17%;
.panel .content
color: #fff;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
.panel h3
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
.panel p
font-size: 0.95rem;
padding: 0.7rem 0;
.btn.transparent
margin: 0;
background: none;
border: 2px solid #fff;
width: 130px;
height: 41px;
font-weight: 600;
font-size: 0.8rem;
.right-panel .image,
.right-panel .content
transform: translateX(800px);
/* ANIMATION */
.container.sign-up-mode:before
transform: translate(100%, -50%);
right: 52%;
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content
transform: translateX(-800px);
.container.sign-up-mode .signin-signup
left: 25%;
.container.sign-up-mode form.sign-up-form
opacity: 1;
z-index: 2;
.container.sign-up-mode form.sign-in-form
opacity: 0;
z-index: 1;
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content
transform: translateX(0%);
.container.sign-up-mode .left-panel
pointer-events: none;
.container.sign-up-mode .right-panel
pointer-events: all;
@media (max-width: 870px)
.container
min-height: 800px;
height: 100vh;
.signin-signup
width: 100%;
top: 95%;
transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;
.signin-signup,
.container.sign-up-mode .signin-signup
left: 50%;
.panels-container
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
.panel
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2;
.right-panel
grid-row: 3 / 4;
.left-panel
grid-row: 1 / 2;
.image
width: 200px;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
.panel .content
padding-right: 15%;
transition: transform 0.9s ease-in-out;
transition-delay: 0.8s;
.panel h3
font-size: 1.2rem;
.panel p
font-size: 0.7rem;
padding: 0.5rem 0;
.btn.transparent
width: 110px;
height: 35px;
font-size: 0.7rem;
.container:before
width: 1500px;
height: 1500px;
transform: translateX(-50%);
left: 30%;
bottom: 68%;
right: initial;
top: initial;
transition: 2s ease-in-out;
.container.sign-up-mode:before
transform: translate(-50%, 100%);
bottom: 32%;
right: initial;
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content
transform: translateY(-300px);
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content
transform: translateY(0px);
.right-panel .image,
.right-panel .content
transform: translateY(300px);
.container.sign-up-mode .signin-signup
top: 5%;
transform: translate(-50%, 0);
@media (max-width: 570px)
form
padding: 0 1.5rem;
.image
display: none;
.panel .content
padding: 0.5rem 1rem;
.container
padding: 1.5rem;
.container:before
bottom: 72%;
left: 50%;
.container.sign-up-mode:before
bottom: 28%;
left: 50%;
【问题讨论】：
【参考方案1】：您应该尝试重新排列您的 head 标签，以便您的 style.css 或任何个人 css 文件位于引导程序文件下方（或者如果可能，请放在最后）。类似的东西
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="icon" href="https://drive.google.com/uc?id=15DKhs1-y_c6C5TXfbQ1es1cJYwItjKkQ" sizes="32x32" type="image/png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
希望它有用。祝你好运。
【讨论】：
刚刚添加了对页眉代码的更改，页脚仍然保持不变，除了导航栏向左移动。 嗨，我查看了代码并没有真正找到导航栏的样式。你也能解释一下你的页脚是如何受到影响的吗？ 是的！所以看起来登录动画出于某种原因在页脚的顶部。我想知道这是因为 Bootstrap 还是其他原因。 不知道怎么给你看剩下的代码，这个问题的文本空间都填满了:(( 解决了问题！我想我会把登录表单和主页的样式放在单独的 css 文件中。以上是关于如何修复 Bootstrap 使其不会弄乱登录表单和页脚？的主要内容，如果未能解决你的问题，请参考以下文章
UITableView，如何修复页脚，使其在滚动时永远不会向上或向下移动？
在 Bootstrap 3 之间添加交互元素时如何修复多个收音机之间的边距？