Question

我是新手，并且很难弄清楚为什么上一个和下一个箭头没有显示在幻灯片图像的中间。

箭头显示在幻灯片的顶部，几乎看不到。

以下是我用来将幻灯片添加到页面的内容。

 <div id="mainBanner" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="imgs/image1.jpg" class="slidImageSize"/>
    </div>
    <div class="item">
      <img src="imgs/image2.jpg"  class="slidImageSize"/>
    </div>
    <div class="item">
      <img src="imgs/image3.jpg" class="slidImageSize"/>
    </div>
    <div class="item">
      <img src="imgs/image4.jpg" class="slidImageSize"/>
    </div>
  </div>
  <!-- Controls -->
  <a class="carousel-control left" href="#mainBanner" data-slide="prev">&lt;</a> 
  <a class="carousel-control right" href="#mainBanner" data-slide="next">&gt;</a>
  </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="resources/js/jquery-1.9.1.min.js"></script> 
<!-- Include all compiled plugins (below) -->
<script src="resources/css/js/bootstrap.js"></script></div>

我可以为自定义CSS类添加一些样式，但我想知道在使用bootstrap时是否遗漏了任何内容。

Answer 1

根据documentation，您需要放置<

而不是>和<span class="glyphicon glyphicon-chevron-right"></span>

示例：http://jsfiddle.net/bortao/6SVCM/

Bootstrap幻灯片显示上一个和下一个按钮/箭头未显示在中间

1 个答案: