Rails Twitter 引导轮播答案

【问题标题】：Rails Twitter Bootstrap CarouselRails Twitter 引导轮播
【发布时间】：2013-03-07 06:29:32
【问题描述】：

我正在使用 Rails 3.2.12、Ruby 2.0 和 Twitter Bootstrap Gem，我正在尝试在我的应用程序中实现 Carousel div，但目前看起来很糟糕，只显示了两个大按钮，一个在左侧屏幕的一部分，其他在右侧。

有没有成功的例子说明如何正确实现Carousel？我应该在我的代码中添加额外的 div 吗？

我的 bootstrap_and_overrides.css.less 文件中没有自定义 CSS，除了这个：

body { 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" %>

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap

【解决方案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，它们指定了绝对路径。换句话说，您可以将此代码剪切并粘贴到轮播模板的其余部分以查看图像。

【讨论】：