В моем приложении rails я использую Bootstrap и хочу, чтобы карусель изображений на домашней странице находилась за пределами контейнера, чтобы она занимала всю ширину браузера. Однако в моем application.html.erb каждое представление отображается в классе контейнера. Как лучше всего разместить карусель изображений на домашней странице за пределами контейнера?
Application.html.erb
<div class="container">
<%= render 'layouts/bootstrap_flash' %>
<%= yield %>
<footer>
<p>© 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 ответ
Закройте текущий div .container
и снова откройте после карусели.
Homepage.html.erb
<% if @images.present? %>
</div><!-- .container -->
<div id="carousel" class="carousel slide" data-ride="carousel">
[...]
</div>
<div class="container">
<% end %>
Похожие вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].