html - 我希望元素在 Rails 应用程序的容器之外

Question

在我的 Rails 应用程序中，我使用的是 Bootstrap 并希望主页上的图像轮播位于容器之外，以便它跨越浏览器的整个宽度。但是，在我的 application.html.erb 中，每个 View 都在容器类中呈现。让主页上的图像轮播位于容器外部的最佳方法是什么？

应用程序.html.erb

<div class="container">
  <%= render 'layouts/bootstrap_flash' %>
  <%= yield %>
  <footer>
    <p>&copy; 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 %> 

Answer 1

关闭当前的.container div，轮播后重新打开。

主页.html.erb

<% if @images.present? %>
</div><!-- .container -->
<div id="carousel" class="carousel slide" data-ride="carousel">
  [...]
</div>
<div class="container">
<% end %>