Rails Twitter引导轮播

Question

I am using Rails 3.2.12, Ruby 2.0, with Twitter Bootstrap Gem, and I am trying to implement Carousel div to my App, but it is looking horrible at the moment, only two big buttons are shown, one at left part of the screen, other on the right. 我将Rails 3.2.12，Ruby 2.0和Twitter Bootstrap Gem一起使用，并且尝试将Carousel div实施到我的App中，但目前看起来很可怕，仅显示了两个大按钮，其中一个位于按钮的左侧屏幕，其他在右边。

Is there are any successful examples of how to correctly implement Carousel? 有没有成功实施正确轮播的成功范例？ Should I add additional div's to my code? 我应该在代码中添加其他div吗？

I got no custom css in my bootstrap_and_overrides.css.less file except this one: 除了以下内容之外，我的bootstrap_and_overrides.css.less文件中没有自定义CSS：

body { padding-top: 60px;} 正文{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

Focus on <div class="carousel-inner" . 专注于<div class="carousel-inner" 。 Within it, you'll notice three nested divs with class="item" . 在其中，您会注意到三个带有class="item"嵌套div。 Each of these nested classes need to reference an image for your carousel to work. 这些嵌套类中的每一个都需要引用图像以使轮播工作。

You currently have nothing between these div tags: 这些div标签之间目前没有任何内容：

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

Here's an example of what you want to do: 这是您要执行的操作的示例：

<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>

The images that I have included are from Twitter, and they specify an absolute path. 我包含的图像来自Twitter，它们指定了绝对路径。 You can, in other words, cut and paste this code into the rest of the carousel template to view the images. 换句话说，您可以将此代码剪切并粘贴到轮播模板的其余部分中以查看图像。

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