我正在学习Bootstrap，目前正在尝试在具有视差背景的div中显示价目表。全屏看起来一切正常，但是当我调整窗口大小时，卡片被放置在其他部分上。我希望视差背景能够覆盖所有三张卡，即使它们彼此之间也是如此。
这是我的JS小提琴：https://jsfiddle.net/s1a20fe6/
$(document).ready(function() {
// Add scrollspy to <body>
$('body').scrollspy({
target: ".navbar",
offset: 50
});
$('.scrollToTop').on('click', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 800);
});
// Add smooth scrolling on all links inside the navbar
$(".nav-link").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 300) {
jQuery('.scrollToTop').fadeIn();
} else {
jQuery('.scrollToTop').fadeOut();
}
});body {
position: relative;
}
#section1 {
height: 100vh;
color: #fff;
background-color: black;
}
#section2 {
padding-top: 100px;
height: 100vh;
color: #fff;
background-color: #c4c4c4;
}
#section3 {
height: 90vh;
background-color: black;
}
#section4 {
padding-top: 100px;
height: 100vh;
color: #fff;
background-color: #c4c4c4;
}
#section5 {
padding-top: 100px;
height: 100vh;
color: #fff;
background-color: grey;
}
.extra-padding {
padding-top: 100px;
}
.navbar {
background-color: white;
}
.nav-item {
text-align: center;
}
.nav-pills .pill1 .nav-link:not(.active) {
background-color: white;
color: black;
}
.nav-pills .pill1 .nav-link {
background-color: white;
color: #0069D9;
}
a:hover {
color: #0069D9 !important;
}
.carousel-item {
opacity: 0.8;
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.scrollToTop {
bottom: 20px;
color: #ffffff !important;
display: none;
font-size: 30px;
line-height: 50px;
position: fixed;
right: 20px;
text-align: center;
text-decoration: none;
width: 55px;
z-index: 999;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
height: 55px;
border-radius: 50%;
background-color: #0069D9 !important;
}
.scrollToTop:hover {
background-color: green;
color: #ffffff !important;
}
.parallax {
background-image: url("https://images.pexels.com/photos/1547737/pexels-photo-1547737.jpeg");
opacity: 1;
height: 90vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.pricing .card {
border: none;
border-radius: 1rem;
transition: all 0.2s;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}
.pricing hr {
margin: 1.5rem 0;
}
.pricing .card-title {
margin: 0.5rem 0;
font-size: 0.9rem;
letter-spacing: .1rem;
font-weight: bold;
}
.pricing .card-price {
font-size: 3rem;
margin: 0;
}
.pricing .card-price .period {
font-size: 0.8rem;
}
.pricing ul li {
margin-bottom: 1rem;
}
.pricing .text-muted {
opacity: 0.7;
}
.pricing .btn {
font-size: 80%;
border-radius: 5rem;
letter-spacing: .1rem;
font-weight: bold;
padding: 1rem;
opacity: 0.7;
transition: all 0.2s;
}
/* Hover Effects on Card */
@media (min-width: 992px) {
.pricing .card:hover {
margin-top: -1rem;
margin-bottom: 1rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
}
.pricing .card:hover .btn {
opacity: 1;
}
}
button:focus {
outline: none;
}<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
<a class="navbar-brand nav-link" href="#section1"><img src="https://logosbynick.com/wp-content/uploads/2018/03/final-logo-example.png" height="61px" alt="Logo img"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto nav nav-pills">
<li class="nav-item pill1" data-toggle="collapse" data-target=".navbar-collapse.show"><a class="nav-link" href="#section1">Home</a></li>
<li class="nav-item pill1" data-toggle="collapse" data-target=".navbar-collapse.show"><a class="nav-link" href="#section2">Info</a></li>
<li class="nav-item pill1" data-toggle="collapse" data-target=".navbar-collapse.show"><a class="nav-link" href="#section3">Producten</a></li>
<li class="nav-item pill1" data-toggle="collapse" data-target=".navbar-collapse.show"><a class="nav-link" href="#section4">Contact</a></li>
<li class="nav-item pill1" data-toggle="collapse" data-target=".navbar-collapse.show"><a class="nav-link" href="#section5">Webshop</a></li>
</ul>
</div>
</div>
</nav>
<div id="section1">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-pause="false">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image: url('https://images.pexels.com/photos/1198817/pexels-photo-1198817.jpeg')">
<div class="carousel-caption d-none d-block">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://images.pexels.com/photos/1105655/pexels-photo-1105655.jpeg')">
<div class="carousel-caption d-none d-block">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://images.pexels.com/photos/1547729/pexels-photo-1547729.jpeg')">
<div class="carousel-caption d-none d-block">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p></p>
</div>
<div id="section3">
<div class="parallax extra-padding">
<section class="pricing py-5">
<div class="container">
<div class="row">
<!-- Free Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Free</h5>
<h6 class="card-price text-center">$0<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
</ul>
<a href="#" class="btn btn-block btn-primary text-uppercase">Meer info</a>
</div>
</div>
</div>
<!-- Plus Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Plus</h5>
<h6 class="card-price text-center">$9<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
</ul>
<a href="#" class="btn btn-block btn-primary text-uppercase">Meer info</a>
</div>
</div>
</div>
<!-- Pro Tier -->
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Pro</h5>
<h6 class="card-price text-center">$49<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>
</ul>
<a href="#" class="btn btn-block btn-primary text-uppercase">Meer info</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div id="section4" class="container-fluid">
<h1>Section 4</h1>
<p></p>
</div>
<div id="section5" class="container-fluid">
<h1>Section 5</h1>
<p></p>
</div>
<a class="scrollToTop" href="#">
<i class="fas fa-angle-up"></i>
</a>