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

Question

我试图通过给出 .carousel-indicators a 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;
}

原文由 Andrei Lazar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 --- bottom: -50px .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 提供了一个工作示例。

原文由 dferenc 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我最近也遇到了这个问题，但是我通过设置 div flex-direction: column-reverse 来解决它。这可能为时已晚，但我认为它可以帮助那些遇到同样问题的人。

原文由 jeppree 发布，翻译遵循 CC BY-SA 4.0 许可协议