容器内的Carousell控制器

Question

我使用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>

Answer 1

将控件置于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>