【发布时间】：2023-03-26 10:06:01
【问题描述】：
我的网页侧面出现了这个奇怪的空白，这是由这两个部分引起的。
我尝试使用 overflow-x:hidden 来解决问题，这导致我的导航栏在没有样式的情况下固定在页面顶部。非常感谢专家对这个问题的帮助。谢谢！
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
#header {
position: absolute;
z-index: 10;
width: 100%;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Poppins', sans-serif;
color: #222;
}
.container-fluid {
padding: 0px;
}
.btn-primary {
background-color: #ADE75F;
border: 1px solid #ADE75F;
}
.btn-primary:hover {
background-color: #71D002;
border: 1px solid #71D002;
}
/****************************************************************************/
/***************************** Mission & Vision *****************************/
/****************************************************************************/
.mission-vision container-fluid {
margin-right: auto;
margin-left: auto;
}
.mission-vision h3 {
text-transform: uppercase;
margin-top: 20px;
font-size: 1.5em;
text-align: center;
}
.mission-vision p {
font-size: 1em;
line-height: 1em;
text-align-last: center;
}
.mission-vision .card {
width: 100%;
height: 100%;
}
.mission-vision .card-group a {
text-decoration: none !important;
}
.mission-vision .card-title, .card-text {
color: white;
}
.mission-vision hr.card-line {
border-top: 4px solid;
width: 120px;
margin: 30px auto;
color: #ADE75F;
}
.mission-vision .card-img-overlay {
background: rgba(0, 0, 0, 0.4);
}
.mission-vision .card-img {
width: 100%;
height: 100%;
background-color: black; /* fallback color */
background-position: center;
background-size: cover;
transition:all 0.3s ease-in-out;
opacity:1;
}
.mission-vision .card:hover .card-img,
.mission-vision .card:focus .card-img {
opacity:0.5;
}
/****************************************************************************/
/********************************** Footer **********************************/
/****************************************************************************/
footer {
background-color: #3f3f3f;
color: #d5d5d5;
padding-top: 2rem;
}
hr.light {
border-top: 1px solid #d5d5d5;
width: 80%;
margin-top: .8rem;
margin-bottom: 1rem;
}
footer a {
color: #d5d5d5;
text-decoration: none;
transition: .2s all;
}
footer ul li {
margin-bottom: 10px;
}
hr.light-100 {
border-top: 1px solid #d5d5d5;
margin-top: .8rem;
margin-bottom: 1rem;
}
footer .padding {
padding-bottom: .8rem;
}
.list-unstyled {
list-style: none;
}
footer a:hover {
text-decoration: none;
color: #71D002;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CNY Gymnastics Centre</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!---- Mission and Vision Card Group---->
<section class="mission-vision">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card-group">
<div class="card">
<a href="#">
<img src="css/img/mission.jpg" class="card-img" alt="Mission">
<div class="card-img-overlay">
<h3 class="card-title">Mission Statement</h3>
<hr class="card-line">
<p class="card-text">At CNY Gym Centre, our mission is to help each gymnast reach their full potential as a gymnast and as a person. We treat each athlete as an individual doing our best to foster confidence and lasting self-esteem. We strive to provide a safe and quality gymnastics program that will have an important and positive impact in your child’s future. We are not only committed to helping each child become the best gymnast they can possible be, but also helping her/him become a happy, healthy and responsible person. We believe that gymnastics is a vehicle in which we can teach skills that will last a lifetime, well beyond their gymnastics years.</p>
<br>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img src="css/img/vision.jpg" class="card-img" alt="Vision">
<div class="card-img-overlay">
<h3 class="card-title">Vision</h3>
<hr class="card-line">
<p class="card-text">With over 30 years of experience, we've become one of the top gymnastics clubs in New York state. We offer programs for children 6 months-18 years. Our programs range from Baby Gym and Parent and Tot to our birthday parties, summer camps, and our high performing teams. Whatever you sign up for, you can always expect that students will be taught in a fun, safe, and positive environment. Here, your child will gain new skills, learn life lessons, make great friends, and become a part of a close community like no other.</p>
<br>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--- Footer -->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="css/img/Logo/logo-footer.png">
<hr class="light">
<ul class="list-unstyled">
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Classes</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<li>
<a href="#">Birthdays</a>
</li>
<li>
<a href="#">Camps</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Upcoming Events</a>
</li>
</ul>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Shoppingtown</h5>
<hr class="light">
<p>3649 Erie Boulevard East DeWitt, NY 13214</p>
<p>( 315 ) 437 - 4535</p>
<p>Mon & Fri: 1:00 pm - 7:30 pm</p>
<p>Tue - Th: 10:00 am - 7:30 pm</p>
<p>Sat: 9:00 am - 4:30 pm</p>
<p>Sun: Closed</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Great Northern</h5>
<hr class="light">
<p>4155 State Highway 31 Clay, NY 13041</p>
<p>( 315 ) 622 - 4600</p>
<p>Mon - Fri: 10:00 am - 9:00 pm</p>
<p>Sat: 10:00 am - 9:00 pm</p>
<p>Sun: 11:00 am - 6:00 pm</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>© cnygymcentre.com</h5>
</div>
</div>
</div>
</footer>【问题讨论】：
-
您需要提供您网站的演示来说明您的问题...
标签： html css bootstrap-4