html - 容器内的旋转木马 Controller

我使用boostrap框架在我的网站上添加了一个旋转木马，首先，我插入了旋转木马，而不是在左右两侧添加了一个容器作为填充物，而不是在旋转木马控制器内部插入了旋转木马，但是由于某些原因，控制器没有获得容器的效果。

HTML：

 <div class="container">
  <div class="carousel-inner">
  <div class="item active"><img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"></div>
  <div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div>
  <div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div>
  <div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div>
  <div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>
  </div>

   <!-- Controls -->
  <a class="left carousel-control" href="#featured" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#featured" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

  </div>

最佳答案

将控件放入carousel-inner中，参见小提琴https://jsfiddle.net/sbgxwv8s/1/

    <div class="container">
      <div class="carousel-inner">
      <div class="item active"><img src="http://lorempixel.com/g/1200/1200/" alt="Lifestyle Photo"></div>
      <div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div>
      <div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div>
      <div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div>
      <div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>
 <!-- Controls -->
        <a class="left carousel-control" href="#featured" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#featured" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>

      </div>



  </div>