bootstrap旋转木马不工作：堆栈图像（使用rails）

Question

我正在开发一个应用程序与轨道和使用引导大部分它的风格。当我使用旋转木马结构时，它将一个图像叠加在另一个上面。另外我假设它使用的JavaScript可能没有正确运行。

这里是我的代码

<section class="carousel" 
    <div class="contanier"> 
     <div class="row"> 
     <div class="col-sm-12"> 
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
      </ol> 
      <div class="carousel-inner" role="listbox"> 
       <div class="carousel-item active"> 
       <%= image_tag("carousel_na_1.jpg") %> 
       <div class="carousel-caption"> 
        <div class="carousel-caption" 
        <h3>Miel de Agave Natural</h3> 
        <p>¿Que es la miel de Agave?</p> 
       </div> 
       </div> 
      </div> 
      <div class="carousel-item"> 
       <%= image_tag("carousel_na_2.jpg") %> 
      </div> 
      <div class="carousel-item"> 
       <%= image_tag("carousel_na_2.jpg") %> 
      </div> 
      </div> 
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
      <span class="icon-prev" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
      <span class="icon-next" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
      </a> 
     </div> 
     </div> 
    </div> 
    </div> 
    </section> 

下面是它是如何使一些图片： enter image description here

Answer 1

更改carousel-item类item，它会工作。