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

Posted

技术标签:

【中文标题】如何在 Bootstrap 4 中定位轮播指示器【英文标题】:How to position carousel indicators in Bootstrap 4 【发布时间】:2018-06-26 23:14:28 【问题描述】:

我试图通过给.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;

【问题讨论】:

【参考方案1】:

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

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

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

【讨论】:

绝对定位不解决,指标依旧不显示【参考方案2】:

.carousel-indicators 上设置bottom: -50px 可以很好地将指示器移动到轮播下方,但是由于overflow: hidden,结果不可见,正如您所怀疑的那样。指示器只是被剪裁了,因为它们超出了轮播的边界框。

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

.carousel-item 
    height: 350px;


.carousel-indicators li 
    width: 10px;
    height: 10px;
    border-radius: 100%;

.carousel-indicators 
    bottom: -50px;

这不会干扰指标的定位。

Codepen 提供了一个工作示例。

【讨论】:

【参考方案3】:

使用此代码对我有用!

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

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

【讨论】:

【参考方案4】:

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

【讨论】:

【参考方案5】:

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

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

【讨论】:

以上是关于如何在 Bootstrap 4 中定位轮播指示器的主要内容,如果未能解决你的问题,请参考以下文章

轮播指示器在 Bootstrap 上不起作用

Bootstrap 5 双轮播定位

每页多个轮播 Bootstrap 5

无法更改 Bootstrap 5 轮播指示器边框半径

我可以在 react-bootstrap 中自定义轮播指示器吗

Bootstrap框架常用组件