Bootstrap V4 Karussell Navigationspfeil Etikett

Question

Ich benutze Bootstrap V4 und Im versuchen, ein Etikett zu den Karussell Navigationspfeilen hinzufügen. Ich habe beschlossen, die Beschriftungen für Screen Reader einzublenden, aber ich wollte sie unter dem Pfeil zentriert platzieren.

Carousel Print

Derzeit die Pfeile HTML ist wie folgt:

<a class="carousel-control-prev" href="#outlookProfile" role="button" data-slide="prev" onclick="(function(event) {event.preventDefault();})(event)"> 
     <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
     <span >Previous</span> 
    </a> 
    <a class="carousel-control-next" href="#outlookProfile" role="button" data-slide="next" onclick="(function(event) {event.preventDefault();})(event)"> 
     <span >Next</span> 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    </a> 

Ich habe versucht das Spiel mit CSS Einstellung diferent Anzeigeeigenschaften, Breite, Schwimmern, etc ohne Erfolg :(

Irgendwelche Vorschläge, wie ich das erreichen kann?

Vielen Dank, Ralms

Answer 1

Ich habe es herausgefunden!

Ich habe habe die folgende CSS-Eigenschaften an die Anker-Tags, die Bootstrap-Klassen:

.carousel-control-prev, .carousel-control-next{ 
    display: flex; 
    flex-direction: column; 
} 

Als nächstes hatte ich die Reihenfolge der Elemente auf der „Steuer-next“ wechseln, weil die Art und Weise Ich hatte es, das Etikett zeigt sich oben.

Ich hoffe, Sie finden es hilfreich.