Bootstrap Karussell Pfeil Positionierung

Question

Ich bin links kratzen meinen Kopf auf diesem. Derzeit habe ich meine Pfeile außerhalb der Fliesen für mein Karussell. Siehe unten:

Wie kann ich die Pfeile nach unten zu bewegen, so dass sie direkt neben der Außenseite der Indikatoren nach links sind und rechts wie unten ohne Überlappung?

Diese Web App auffüllt verschiedenen Fliesen je nachdem, was sich Benutzer anmelden, so dass es wichtig ist, die Pfeile zu halten Einstellens auf, wie viele Karussells Indikatoren bevöl pro Benutzer.

HTML

<div id="{{ game_group }}-game-carousel" class="carousel slide"> 
<div class="test"> 
<div class="carousel-indicator-wrapper"> 

    <ol class="carousel-indicators"> 
     {% for obj in game_data %} 
      <li data-target="#{{ game_group }}-game-carousel" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.counter == 1 %}active{% endif %}"></li> 
      {% if game_group != "NS" and forloop.last %} 
       <li data-target="#{{ game_group }}-game-carousel" data-slide-to="{{ forloop.counter0 | add:"1" }}"></li> 
      {% endif %} 
     {% endfor %} 
    </ol> 

</div> 
<a class="carousel-control left" href="#{{ game_group }}-game-carousel" data-slide="prev"><i class="icon-chevron-left" aria-hidden="true"></i></a> 
<a class="carousel-control right" href="#{{ game_group }}-game-carousel" data-slide="next"><i class="icon-chevron-right" aria-hidden="true"></i></a> 
</div> 
</div> 

CSS

#SL-game-carousel, #CL-game-carousel{ 
height: 425px; 
margin-bottom:0px; 
border:0px solid red; 
} 

#NS-game-carousel{ 
height:180px; 
margin-bottom:0px; 
border:0px solid red; 
} 

.carousel-indicator-wrapper{ 
    position:absolute; 
    top:160px; 
    z-index: 5; 
    width:100%; 
} 

#lobby-tab-content .carousel-indicator-wrapper{ 
    top: 362px; 
} 

.carousel-indicators { 
    position:relative; 
    padding:0; 
    /*use this display this to center the indicators horizontally*/ 
    display:table; 
    margin:0 auto; 
    top: 0px; 
} 

.carousel-indicators li { 
background-color: rgba(223, 223, 223, 0.40); 
border-radius: 5px; 
height: 10px; 
margin-left: 2px; 
margin-right: 2px; 
width: 10px; 
cursor: pointer; 
} 

.carousel-indicators .active { 
    background: rgb(255,255,255); 
} 

.test { 
text-align: center; 
} 

.slot-carousel { 
    width:640px; 
    height:345px; 
    /*background-color:rgba(255,0,0,.3);*/ 
    margin: 0 auto; 
} 

#NS-game-carousel .slot-carousel { 
height:180px; 
} 

#lobby-tab-content #SL-game-carousel .carousel-control, #NS-game-carousel     
.carousel-control, #CL-game-carousel .carousel-control { 
    margin: /*178px 0px 0px 270px*/; 
    border-radius: 0; 
    background-color:transparent; 
    color: #dfdfdf; 
    font-size: 38px; 
    height: 40px; 
    width: 40px; 
    opacity: 1; 
    filter: alpha(enabled='false'); 
    border:0; 
    text-decoration: none; 
} 

#lobby-tab-content #SL-game-carousel .carousel-control.right, #NS-game-carousel .carousel-control.right, #CL-game-carousel .carousel-control.right { 
    margin: /*178px 299px 0px 0px*/; 
} 

.icon-chevron-left:hover { 
    color: #d8d8d8 /*#cbcbcb*/; 
} 
.icon-chevron-right:hover { 
    color: #d8d8d8 /*#cbcbcb*/; 
} 

#game-lobby #NS-game-carousel .carousel-control{ 
    margin-top:-27px; 
} 

#game-lobby #NS-game-carousel .carousel-control.right{ 
    margin-top:-24px; 
} 

.carousel-control.left { 
    background-image: none !important;/*url('/static/images/arrow-left.png');*/ 
    background-position: 0px 0px; 
    background-repeat: no-repeat; 
} 

.carousel-control.right { 
    left: auto; 
    right: 15px; 
    background-image: none !important; /*url('/static/images/arrow-right.png')*/ 
    background-position:0px 0px; 
    background-repeat:no-repeat; 
} 

Jede Hilfe ist gerne willkommen. Vielen Dank!

Answer 1

Versuchen Sie, eine Marge zu den Klassen des Karussells Pfeile hinzufügen, wie folgt -

.carousel-control.left { 
    margin-right: 15px; 
} 
.carousel-control.right { 
    margin-left: 15px; 
} 

Answer 2

Versuchen das Hinzufügen/Aktualisieren von top: 90% auf Ihre CSS ihnen zu bringen

Dann reduzieren/erhöhen Sie die Breite o f der .carousel-control

.carousel-control { 
    width: 66%; 
} 

Hoffnung hilft diese