我正在建立一个新网站，其中一个部分有轮播滑块，并希望在该部分中安装该滑块。我该如何设置我的滑块，使其适合该部分区域并且仍然响应？
运行 Bootstrap 4.3.1 和 JQuery 3.4.1。在过去，我尝试将大小的滑块 css 更改为百分比 (%) 但滑块高度仍然不适合该部分
索引.html
<div id="course" class="offset">
<div class="col-12 narrow text-center">
<h1>Rental Bachtiar Medan Hehe</h1>
<div class="row">
<div class="col-md-6">
<div class="course-class">
<iframe marginheight="1" marginwidth="1" scrolling="no" allowtransparency="true" src="sliderCarousel.html" seamless></iframe>
</div>
</div>
<div class="col-md-6">
<div class="course-class">
<h3>Custom Animation</h3>
<p>Animate.css and Waypoints.js allow for smooth animations scrolling down the site.</p>
</div>
</div>
</div>
</div>
</div>
sliderCarousel.html
<div id="demo" class="carousel slide text-center" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://drive.google.com/uc?export=download&id=17MKwEHxWd-OCPx9P2LsTBBR0kNR__aCe" alt="Gambar - 1" >
<div class="carousel-caption">
<h3>Slide 1</h3>
<p>Deskripsi Slide 1</p>
</div>
</div>
<div class="carousel-item">
<img src="https://drive.google.com/uc?export=download&id=1m3O0HLyKQPO-MOFcSNtP4EqpenycEQaC" alt="Gambar - 2" >
<div class="carousel-caption">
<h3>Slide 2</h3>
<p>Deskripsi Slide 2</p>
</div>
</div>
<div class="carousel-item">
<img src="https://drive.google.com/uc?export=download&id=1NSeFxs2MXhLfCU14qtqnRWce8LPJC6bR" alt="Gambar - 3" >
<div class="carousel-caption">
<h3>Slide 3</h3>
<p>Deskripsi Slide 3</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<div class="control-prev">
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
</div>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
以及我关于该部分的其余 css。样式.css
/*---------- COURSE SECTION ------------*/
#course .narrow{
width: 90%;/*75%*/
margin: 3.5rem auto;/*1.5rem*/
padding-top: .2rem;
}
.narrow h1{
font-size: 2.4rem;
}
.btn-secondary{
border-width: medium;
border-radius: 0;
padding: .6rem 1.2rem;
font-size: 1.2rem;
text-transform: uppercase;
margin: 1rem;
border-color: #1EBBAE;
background-color: #1EBBAE;
color: white;
}
.btn-secondary:hover,
.btn-secondary:focus{
border-color: #189582;
background-color: #189582;
color: white;
}
.course-class h3{
font-size: 1.3rem;
text-transform: uppercase;
padding-bottom: .4rem;
text-align: left;
}
.course-class p{
font-size: 1.1rem;
text-align: left;
}
/*---------------------- iframe Section-----------------------------*/
iframe[seamless] {
border: none;
overflow: hidden;
width: 100%;
height: auto;
}
我希望在课程部分的 index.html 输出显示适合其部分高度的滑块。
