テキストのみカルーセル

Question

テキストのみのカルーセルはありませんimgなし。テキストがコントロールと衝突しているようです。私が見つけたすべての例は、<img>を使用しています。私はd-flexクラス、ブロック、さらにはcarousel-captionを使用しようとしました。これまでに何も働いていません。

<div id="carouselContent" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item active"> 
      <p>lorem ipsum (imagine longer text)</p> 
     </div> 
     <div class="carousel-item"> 
      <p>lorem ipsum (imagine longer text)</p> 
     </div> 
    </div> 
    <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev"> 
     <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next"> 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

Answer 1

私はcarousel-controlsは、それがテキストや画像のかどうか、コンテンツをオーバーレイするように設計されていると思います。 text-centerは、各項目のテキストを中央に配置するのに適しているようです。

ただし、BSアルファ6の場合、.carousel-itemはdisplay:flex;であり、これはcarousel-itemの内容で行うことができる位置の一部を制限します。このため未解決の問題があります：回避策として https://github.com/twbs/bootstrap/issues/21611

、あなたはtext-centerを使用して、アクティブなカルーセル項目のdisplay:blockをオーバーライドすることができます：

<div class="carousel-item text-center p-4"> 
     <p>lorem ipsum (imagine longer text)</p> 
</div> 

.carousel-item.active { 
    display:block; 
} 

デモ：またhttp://www.codeply.com/go/OJHdvdXimm

---

見ます：Vertically center text in Bootstrap carousel