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，它會工作。