如何在不手动定义转盘高度的情况下将引导程序转盘项目标题定位在图像之外

Question

<div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="true">
<div className="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>

<div className="carousel-inner">
<div className="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div>
Captions
</div>
</div>
<div className="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div className="carousel-item">
<img src="..." class="d-block w-100" alt="..."> 
</div>
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div>

这是一个标准的引导程序转盘，我有。我现在想做的是将Captions定位在每个carousel-item内部，在carousel-item和carousel-inner外部，但在carousel容器内。我希望它们位于indicators下方，并与每个carousel-item一起滑动。

这是一张我希望字幕在哪里的图片：

项目之外的标题

我显然可以使用绝对位置，但carousel的高度不会扩大，我必须自己扩大它，我不想这样做。你还能想出什么其他方法将它们移动到图像之外，indicators之下，但仍然与每个carousel-item一起滑动？

为什么当我向caption元素添加padding-top或margin-top时，indicators会随之下移？

字幕元素上的填充或边距

Answer 1

简单地删除Bootstrap的carousel-caption类就解决了这个问题。您可以使用position-relative类作为字幕分区的替换。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://dummyimage.com/1000x200/000/fff" class="d-block w-100" alt="...">
<div class="position-relative text-center">
Caption 1
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/1000x200/000/fff" class="d-block w-100" alt="...">
<div class="position-relative text-center">
Caption 2
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/1000x200/000/fff" class="d-block w-100" alt="...">
<div class="position-relative text-center">
Caption 3
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>