jquery - Bootstrap轮播箭头定位

Question

我对此感到摸不着头脑。目前，我的箭头位于旋转木马的图 block 之外。见下文:

如何向下移动箭头，使它们位于左侧和右侧指示器外侧的旁边，如下所示，而不重叠？

此网络应用程序会根据用户登录的内容填充不同的图 block ，因此根据每个用户填充的轮播指示器数量来调整箭头非常重要。

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 {
    width: 30%;/*put your desired width*/
    margin-top: 150px;/*put your desired top margin*/
}