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

Question

我试图通过给

.carousel-indicators

一个

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: -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.

Answer 2

使用此代码对我有用！

 .carousel-indicator {
   position: relative;
   bottom: -50px;
 }

这将我的指标推低到足以让我的段落可见。

Answer 3

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

Answer 4

为了使用bottom，元素需要相对定位，绝对定位或固定定位。如果它是相对定位的，则 bottom 属性使元素的底部边缘移动到其正常位置的上方/下方。

.carousel-indicators {
position: absolute;
bottom: -50px;
}

如果它已经正确定位，bottom:-50px 可能会将元素移动到父元素#slider 的可见区域下方。 尝试删除 overflow: hidden;来自 #slider 并检查轮播指示器的位置。

Answer 5

我试图将此指示器放在背景图像滑块的底部中心。它的工作。

.carousel-indicators{
  position:absolute;
  right:0;
  bottom:150px;
  left:0px; 
 }

Answer 6

我已经尝试了以下并为我工作！

.carousel-indicators{
position: absolute;
bottom: -50px;
}