如何在 Bootstrap 4 中定位轮播指示器

Question

我试图通过给出.carousel-indicatorsa来移动滑块图像下的指标，bottom: -50px;但指标只是消失了。现在我猜这与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;
}

Answer 1

设置bottom: -50pxon.carousel-indicators可以很好地移动轮播下方的指示器，但是由于 ，结果不可见overflow: hidden，正如您所怀疑的那样。当指示器离开轮播的边界框时，它们只是被剪裁了。

而不是设置高度和#slider本身的溢出属性，我建议通过.carousel-item如下所示的类来修复高度：

.carousel-item {
    height: 350px;
}

.carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
.carousel-indicators {
    bottom: -50px;
}

这不会干扰指标的定位。

一个工作示例可用作Codepen。