我正在制作一个网格，我希望大列sbp-item1包含一个幻灯片。我正在努力弄清楚如何放置幻灯片，因此滑块将保留在sbp-item1的内部，并以高度和宽度填充列，而没有任何填充。
目前，幻灯片放映在sbp-item1上方，并且高度和宽度并未填充sbp-item1，而是从该列中移出了更多。有人知道如何解决此问题，因此我将幻灯片的高度和宽度保持为适合sbp-item1吗？
A demo fiddle can be seen here。
最诚挚的问候。
<style>
<!--slider-->
.jk-slider{
width:100%;
}
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/* CSS GRID */
.sbp-wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 20px;
background-color: #fff;
border: 8px solid #fff;
}
.sbp-wrapper > div {
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
.sbp-wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.bg-img {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.sbp-item1 {
grid-row: 1 / 3;
grid-column: 1/9;
height: 520px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.sbp-item2 {
grid-row: 1 / 1;
grid-column: 9/13;
height: 250px;
display: flex;
justify-content: flex-end;
flex-direction: column;
background-image: url("https://placehold.it/380x250");
background-position: 90% 10%
}
.sbp-item3 {
grid-row: 2 / 3;
grid-column: 9/13;
height: 250px;
display: flex;
justify-content: flex-end;
flex-direction: column;
background-image: url("https://placehold.it/380x250");
}
@media only screen and (max-width: 600px) {
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.sbp-item1 {
grid-row: 1 / 3;
grid-column: 1/13;
height: 520px;
}
.sbp-item2 {
grid-row: 3 / 3;
grid-column: 1/13;
height: 200px;
}
.sbp-item3 {
grid-row: 4 / 5;
grid-column: 1 / 7;
height: 200px;
}
</style><div class="sbp-wrapper">
<div class="sbp-item1 bg-img">
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="https://placekitten.com/800/520" /></a>
<div class="hero">
<hgroup>
<h1>Search for</h1>
<h3>the books you need and save ! </h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
</hgroup>
</div>
</div>
<div class="item">
<a href="#"><img src="https://placekitten.com/800/520" /></a>
<div class="hero">
<hgroup>
<h1>Search for</h1>
<h3>the books you need and save ! </h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
</hgroup>
</div>
</div>
<div class="item">
<a href="#"><img src="https://placekitten.com/800/520" /></a>
<div class="hero">
<hgroup>
<h1>Search for</h1>
<h3>the books you need and save ! </h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
</hgroup>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<a class="sbp-item2 bg-img" href="#"></a>
<a class="sbp-item3 bg-img" href="#"></a>
</div>