Css Rails推特引导旋转木马_Css_Ruby On Rails_Twitter Bootstrap

Css Rails推特引导旋转木马

css ruby-on-rails twitter-bootstrap

Css Rails推特引导旋转木马,css,ruby-on-rails,twitter-bootstrap,Css,Ruby On Rails,Twitter Bootstrap,我正在使用Rails 3.2.12、Ruby 2.0和Twitter Bootstrap Gem，我正在尝试在我的应用程序中实现Carousel div，但目前看起来很糟糕，只显示了两个大按钮，一个在屏幕的左侧，另一个在右侧关于如何正确实施旋转木马，有没有成功的例子？我应该在代码中添加其他div吗我的bootstrap_和_overrides.css.less文件中没有自定义css，除了这个：正文{顶部填充：60px；} 传送带项目 ... ... 侧栏

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

关于如何正确实施旋转木马，有没有成功的例子？我应该在代码中添加其他div吗

我的bootstrap_和_overrides.css.less文件中没有自定义css，除了这个：

正文{顶部填充：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" %>

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