Bootsrap Carousel数据幻灯片箭头位于幻灯片图像下

Question

我有一个引导旋转木马我试图添加按钮/箭头在幻灯片之间切换我已经指定位置是绝对的，它的可点击和工作但箭头在图像下面可能是问题检查这里＆gt; link

这是代码

＆＃13;

＆＃13;

#myCarousel .carousel-indicators {
  position: absolute !important;
}

@media (max-width: 768px) {
  /* Make the indicators larger for easier clicking with fingers/thumb on mobile */
  #myCarousel .carousel-indicators {
    bottom: -20px !important;
    position: absolute !important;
  }
  #myCarousel .carousel-indicators li {
    display: inline-block;
    margin: 0px 5px;
    width: 15px;
    height: 15px;
  }
  #myCarousel .carousel-indicators li.active {
    margin: 0px 5px;
    width: 20px;
    height: 20px;
  }
}

＆＃13;

<div class="overlay">
  <a href="lest-sidebar.php"><input class="btn btn-default" type="submit" name="submit" value="Order Cleaning" /></a>
</div>
<div id="myCarousel" class="carousel slide" style="width:100%;height:auto">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" style="height:auto">
    <div class="item active">
      <img src="images/test.png" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
        </div>
      </div>
    </div>
    <div class="item">
      <img src="images/test.png" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">

        </div>
      </div>
    </div>
    <div class="item">
      <img src="images/test.png" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">

        </div>
      </div>
    </div>
    <a data-slide="prev" href="#myCarousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
    <a data-slide="next" href="#myCarousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你在css中犯了错误

检查您提供的768px css botton: -20px !important，更改

：此

#myCarousel .carousel-indicators {
    bottom: -20px !important;
    position:absolute !important;
}

要

#myCarousel .carousel-indicators {
    bottom: 0px !important;
    position:absolute !important;
}

修改

我发现你正在使用icomoon css

所以必须改变这个html

<a data-slide="prev" href="#myCarousel" class="left carousel-control">
   <i class="fa fa-chevron-left"></i>
</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">
   <i class="fa fa-chevron-right"></i>
</a>

以

<a data-slide="prev" href="#myCarousel" class="left carousel-control">
   <i class="icon-arrow-left"></i>
</a>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">
   <i class="icon-arrow-right"></i>
</a>

并提供额外的CSS

<强> CSS

.left.carousel-control i {
    position: absolute;
    left: 10px;
    top: 45%;
    font-size: 35px;
}
.right.carousel-control i {
    position: absolute;
    right: 10px;
    top: 45%;
    font-size: 35px;
}

Output