Bootstrap 4 - Wechselposition des Karussells steuert

Question

Ich habe ein einfaches bootstrap 4 (beta-v2) Karussell:

<div id="carouselSteam" class="carousel slide" data-interval="false"> 
    <div class="carousel-inner"> 
     {% for key, value in results.items %} 
      {% if forloop.counter == 1 %} 
       <div class="carousel-item active"> 
        {% include "games/result_table.html" with key=key value=value %} 
       </div> 
      {% else %} 
       <div class="carousel-item"> 
        {% include "games/result_table.html" with key=key value=value %} 
       </div> 
      {% endif %} 
     {% endfor %} 
    </div> 
    <a class="carousel-control-prev" href="#carouselSteam" 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="#carouselSteam" role="button" data-slide="next"> 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

Mein Problem ist, dass die carousel-inner recht lang sein kann, da es eine Tabelle enthält. Derzeit erscheinen die Steuerelemente in der Mitte des Karussells; Idealerweise würde ich sie gerne näher an die Spitze bringen (sagen wir 20% von oben) - weiß jemand einen Weg dies zu tun?

Answer 1

In der neuesten Bootstrap v4 Beta wird der Abstand der Karussellsteuerelemente vom unteren Ende des Karussells durch das CSS-Attribut bottom gesteuert.

Daher ist es ziemlich einfach, die Platzierung der linken und rechten Karussellsteuerungssymbole durch Einstellen der bottom percentage zu steuern. Hier ist ein Beispiel, wo ich sie ungefähr 75% des Weges von der Mitte des Karussells wegstelle.

.carousel-control-prev, 
.carousel-control-next{ 
     bottom: 75%; 
} 

Hier ist ein codepen Arbeits: https://codepen.io/Washable/pen/xPYJma?editors=1100