Текст только карусель

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 alpha 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