Question

我在我的网站上使用Bootstrap轮播，而不是使用通常的圆圈指示器，我正在使用每张图片的缩略图。我打算稍后动态地这样做，所以此刻刚刚添加了样本图像。

我希望我的左右字形符号排在第一个和最后一个缩略图旁边但是我无法看到它正确。我试图把它放进去，但那并没有成功。

以前

  <!-- Indicators -->
  <ol class="single-indicator">
    <li data-target="#myCarousel" data-slide-to="0" class="active">
      <img src="images/robin-thumb.jpg" class="img-responsive">
    </li>
    <li data-target="#myCarousel" data-slide-to="1">
       <img src="images/robin-thumb.jpg" class="img-responsive">
    </li>
    <li data-target="#myCarousel" data-slide-to="2">
       <img src="images/robin-thumb.jpg" class="img-responsive">
    </li>

          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
       </a>


  </ol>


  </div>

CSS

.carousel-control {
  position: absolute;
top: 320px;
 left: 270px;
  bottom: 0;
  width: 15%;
  opacity: 0.5;
  filter: alpha(opacity=50);
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left {
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 115px;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}

在指标bootstrap旁边添加右侧和左侧glyphicons

0 个答案: