Bootstrap 5 响应式轮播文本问题答案

【问题标题】：Bootstrap 5 responsive carousel text problemsBootstrap 5 响应式轮播文本问题
【发布时间】：2022-01-24 14:19:01
【问题描述】：

我正在建立一个新网站，我正在使用引导程序 5。我在标题字段中添加了一个响应式轮播，但轮播中的文本和按钮不兼容。我正在添加一些图像和源代码以更好地理解问题。

    <!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

    <!-- Indicators/dots -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="4"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slider/5.png" alt="Los Angeles" class="d-block img-fluid" style="width:100%">
            <div class="carousel-caption">
                <h3>BİZİ ARAMAKTAN ÇEKİNMEYİN</h3>
                <p>Teknik Destek Hizmetleri</p>
                <p>+90 850 111 11 11</p>
                <button type="button" class="btn btn-outline-danger">Detaylı Bilgi</button>
            </div>

        </div>
        <div class="carousel-item">
            <img src="images/slider/1.png" alt="" class="d-block" style="width:100%">
            <div class="carousel-caption">
                <h3>Yakınınızda bir <span style="color:#0597d4;">3CX</span> Distribütörü arıyorsanız, doğru
                    yerdesiniz.</h3><br />
                <button type="button" class="btn btn-outline-info">Detaylı Bilgi</button>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/slider/7.png" alt="" class="d-block" style="width:100%">
            <div class="carousel-caption">
                <h3>Fortinet BİLİŞİM</h3>
                <p><span style="color: red; ">FORTİNET TÜRKİYENİN</span> SELECT PARTNERİ</p>
            </div>
        </div>
        <div id="special" class="carousel-item">
            <img src="images/slider/12.png" alt="" class="d-block" style="width:100%">
            <div class="carousel-caption">
                <h3>Sektör tecrübemizi yeni neslin çalışma koşulları ile
                    birleştirerek,</h3>
                <p>kurumların iç dinamiklerine özel avantajlı
                    çözüm üretme vizyonundan yola çıktık.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/slider/15.png" alt="" class="d-block" style="width:100%">
            <div class="carousel-caption">
                <h3>Fortinet olarak, yerel alan ağı, uzak ağ, kablosuz ağ, ağ güvenliği ve güvenli uzaktan erişim gibi
                </h3>
                <p>ağ teknolojilerinin kurulumu ve devreye alınması gibi ağ çözümlerini sunuyoruz.</p>
            </div>
        </div>
    </div>
</div>
<!-- Carousel -->

CSS 代码

 .carousel-caption{
transform: translateY(-50%) ;
bottom: initial;
top: 50%;

} enter image description here

enter image description here

【问题讨论】：

标签： html css carousel bootstrap-5

【解决方案1】：

尝试将d-flex 类添加到carousel-caption，同时添加align-items-center

<div class="carousel-caption align-items-center d-flex">
  <h3>BİZİ ARAMAKTAN ÇEKİNMEYİN</h3>
  <p>Teknik Destek Hizmetleri</p>
  <p>+90 850 111 11 11</p>
  <button type="button" class="btn btn-outline-danger">Detaylı Bilgi</button>
</div>

【讨论】：