В моем приложении rails я использую Bootstrap и хочу, чтобы карусель изображений на домашней странице находилась за пределами контейнера, чтобы она занимала всю ширину браузера. Однако в моем application.html.erb каждое представление отображается в классе контейнера. Как лучше всего разместить карусель изображений на домашней странице за пределами контейнера?

Application.html.erb

<div class="container">
  <%= render 'layouts/bootstrap_flash' %>
  <%= yield %>
  <footer>
    <p>&copy; Company 2013</p>
  </footer>
</div> <!-- /container -->

Homepage.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 %> 
1
Eric Filkins 24 Дек 2013 в 01:55

1 ответ

Лучший ответ

Закройте текущий div .container и снова откройте после карусели.

Homepage.html.erb

<% if @images.present? %>
</div><!-- .container -->
<div id="carousel" class="carousel slide" data-ride="carousel">
  [...]
</div>
<div class="container">
<% end %> 
1
alexvance 24 Дек 2013 в 02:02