ブートストラップカルーセルの矢の位置

Question

私はこれに私の頭を傷つけて残っています。現在、私はカルーセルのためにタイルの外に私の矢印を持っています。以下を参照してください。

彼らは重複することなく、右隣の指標の外に以下のように左右にしているので、私は下向きの矢印を移動するにはどうすればよいですか？

このWebアプリは、多くのカルーセル指標は、ユーザーごとに取り込む方法に基づいて調整することが重要ですので、ユーザーは矢印を維持するためにログインものに応じて異なるタイルに移入されます。

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; 
} 

すべてのヘルプは喜んで感謝しています。ありがとう！

Answer 1

次のように、あなたのカルーセル矢のクラスにマージンを追加してみてください -

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

Answer 2

てみトップ更新/追加：

それらをダウンさせるためにあなたのCSSに90％を

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev { 
    position: absolute; 
    top: 90%; 
} 

次に、 .carousel制御F

.carousel-control { 
    width: 66%; 
} 

希望これは