我试图通过给 .carousel-indicators
bottom: -50px;
来移动 slider 图像下的指示器,但指示器只是消失了。现在我猜测这与 slider 的 overflow:hidden
有关,但我无法弄清楚。
这是我的代码:
<div id="slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
<li data-target="#slider" data-slide-to="3"></li>
<li data-target="#slider" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="header.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider2.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider3.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider4.jpeg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider5.jpeg">
</div>
</div>
</div>
和 CSS:
#slider {
height: 350px;
overflow: hidden;
width: 100%;
}
.carousel-indicators li {
width: 10px;
height: 10px;
border-radius: 100%;
}
.carousel-indicators {
bottom: -50px;
}
最佳答案
在 .carousel-indicators
上设置 bottom: -50px
可以很好地将指示器移动到轮播下方,但是由于 溢出,结果不可见: hidden
,正如您所怀疑的那样。当指示符离开轮播的边界框时,它们会被简单地剪裁掉。
与其设置 #slider
本身的高度和溢出属性,我建议通过 .carousel-item
类来固定高度,如下所示:
.carousel-item {
height: 350px;
}
.carousel-indicators li {
width: 10px;
height: 10px;
border-radius: 100%;
}
.carousel-indicators {
bottom: -50px;
}
这不会干扰指标的定位。
可用的工作示例为 Codepen .
关于css - 如何在 Bootstrap 4 中定位轮播指示器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48311855/