我正在使用 bootstrap carousal 代碼。在常規尺寸上看到時，我的輪播文本看起來不錯，但在較小尺寸的螢屏上看到時卻消失了。文字似乎落后于影像。我曾嘗試使用 z-index、媒體查詢來更改字體大小、邊距、填充，但它仍然相同。
HTML代碼：
<div id="carouselExampleDark" class="carousel carousel-light slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="images/image1.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>First slide lable</h1>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/image2.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Second slide lable</h1>
</div>
</div>
<div class="carousel-item">
<img src="images/image3.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Third slide label</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
CSS代碼：
.carousel-caption {
text-align: center;
margin-bottom: 18%;
z-index: 999;
font-size: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
position: absolute;
padding-left: 20%;
padding-right: 20%;
padding-top: 20%;
}
@media only screen and (max-width: 800px) {
.carousel-caption {
text-align: center;
font-size: 20px;
}
}
uj5u.com熱心網友回復：
你有d-none d-md-block字幕上的課程。這有效地display: none從xs然后display: block從md和上面放置。洗掉所有 3 個d-none，您的問題將得到解決。
改變：
<div class="carousel-caption d-none d-md-block">
// caption
</div>
到：
<div class="carousel-caption">
// caption
</div>
編輯：您實際上也不需要d-md-block，因為默認情況下該元素是被阻止的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/393661.html
標籤：html css 推特引导 bootstrap-4 bootstrap-5