ブートストラップカルーセルが動作しない：画像をスタックする（レールを使用）

Question

私はレールでアプリを開発しており、そのほとんどをスタイルするためにブートストラップを使用しています。カルーセル構造を使用しているとき、それは他の画像の上に1つの画像を積み重ねます。また、私は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

変更itemへcarousel-itemクラスは、それが動作します。