Rails Twitter Bootstrap旋轉木馬

我正在使用Rails 3.2.12，Ruby 2.0，以及Twitter Bootstrap Gem，並且我正在嘗試將Carousel div應用於我的應用程序，但目前看起來很可怕，只顯示了兩個大按鈕，一個在屏幕左側，另一個在右側。Rails Twitter Bootstrap旋轉木馬

是否有任何成功的例子如何正確實施Carousel？我應該在代碼中添加額外的div嗎？

我在我的bootstrap_and_overrides.css.less文件中沒有自定義CSS，除了這一個：

體{填充頂：60像素;}

</head> 
<body> 

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="<%= root_path %>">ProjectX</a> 
     <div class="container nav-collapse"> 
     <ul class="nav"> 
     <% if current_user %> 
      <li class="nav-header"><%= current_user.email %></li> 
      <li><%= link_to "Log out", logout_path %></li> 
      </ul> 
     <% else %> 
     <ul class="nav"> 
      <li><%= link_to "Log In", login_path %></li> 
      <li><%= link_to "Sign Up", signup_path %></li> 
      <li><%= link_to "Forum", "/path3" %></li> 
     </ul> 
     <% end %> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div> 




<div id="myCarousel" class="carousel"> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    Carousel items 
    <div class="carousel-inner"> 
    <div class="active item"></div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 



<div class="container"> 
    <div class="row"> 
     <div class="span9"> 
     <%= bootstrap_flash %> 
     <%= yield %> 
     </div> 
     <div class="span3"> 
     <div class="well sidebar-nav"> 
      <ul class="nav nav-list"> 
      <li class="nav-header">Sidebar</li> 
      <li><%= link_to "News", "/path1" %></li> 
      <li><%= link_to "Recent", "/path2" %></li> 
      <li><%= link_to "Hot Topics", "/path3" %></li> 
      </ul> 
     </div><!--/.well --> 
     </div><!--/span--> 
    </div><!--/row--> 

    <footer> 
    <p>&copy;Iron Man</p> 
    </footer> 

</div> <!-- /container --> 

<!-- Javascripts 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<%= javascript_include_tag "application" %>

來源

2013-03-05 Ivan Kutsarov

重點在<div class="carousel-inner"。在它內部，你會注意到三個與class="item"嵌套的div。這些嵌套類中的每一個都需要引用圖像，以便您的傳送帶工作。

您現在有這些div標籤之間沒有任何東西：

<div class="carousel-inner"> 
    <div class="active item"></div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
</div>

這裏有你想要做什麼的例子：

<div class="carousel-inner"> 
    <div class="active item"><img src='https://dev.twitter.com/sites/default/files/images_platform_object/arctic-blue-bird.jpg?1334604325'></div> 
    <div class="item"><img src='https://dev.twitter.com/sites/default/files/images_platform_object/missouri_meadow_lark.jpg?1334604578'></div> 
    <div class="item"><img src='https://dev.twitter.com/sites/default/files/images_platform_object/yellow_flycatcher.jpg?1334605975'></div> 
</div>

，我已經包括的圖像是從Twitter，和他們指定絕對路徑。換句話說，您可以將此代碼剪切並粘貼到輪播模板的其餘部分以查看圖像。

來源

2013-03-06 22:22:22 ChoKim

Rails Twitter Bootstrap旋轉木馬

回答

相關問題