Rails Twitter引導輪播

Question

我將Rails 3.2.12，Ruby 2.0和Twitter Bootstrap Gem一起使用，並且嘗試將Carousel div實施到我的App中，但目前看起來很可怕，僅顯示了兩個大按鈕，其中一個位於按鈕的左側屏幕，其他在右邊。

有沒有成功實施正確輪播的成功范例？ 我應該在代碼中添加其他div嗎？

除了以下內容之外，我的bootstrap_and_overrides.css.less文件中沒有自定義CSS：

正文{padding-top：60px;}

</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" %>

Answer 1

專注於<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，它們指定了絕對路徑。 換句話說，您可以將此代碼剪切並粘貼到輪播模板的其余部分中以查看圖像。

Rails Twitter引導輪播

問題描述

1 個解決方案

解決方案1
1 2013-03-06 22:22:22

Rails Twitter引導輪播

問題描述

1 個解決方案

解決方案1 1 2013-03-06 22:22:22

解決方案1
1 2013-03-06 22:22:22