在我的rails应用程序中,我正在使用Bootstrap,并希望主页上的图像轮播位于容器之外,以便它跨越浏览器的整个宽度。但是,在我的应用程序.html.erb 中,我将每个视图呈现在容器类中。让主页上的图片轮播位于容器外部的最佳方式是什么?
应用程序.html.erb
<div class="container">
<%= render 'layouts/bootstrap_flash' %>
<%= yield %>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
首页.html.erb
<% if @images.present? %>
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<% @images.each do |image| %>
<li data-target="#carousel" data-slide-to="<%= image.placement %>" class=<%= 'active' if image.placement == 1 %>></li>
<% end %>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<% @images.each do |image| %>
<% if image.placement == 1 %>
<div class="item active">
<% else %>
<div class="item">
<% end %>
<% if image.destination.present? %>
<%= link_to image_tag(image.picture(:original), image.destination) %>
<% else %>
<%= image_tag(image.picture(:original)) %>
<% end %>
</div>
<% end %>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<% end %>
关闭当前.container
div,并在轮播后重新打开。
首页.html.erb
<% if @images.present? %>
</div><!-- .container -->
<div id="carousel" class="carousel slide" data-ride="carousel">
[...]
</div>
<div class="container">
<% end %>