Динамически создавать строки и столбцы в bootstrap/rails

Question

Использование Rails с загрузкой Я пытаюсь развернуть страницу, на которой будет отображаться неизвестное количество блоков контента. На маленьких экранах должен быть 1 столбец, на средних экранах 2 столбца, а на больших экранах - 3 колонки.

Такие, как ...

Однако я не могу работать, как нарезать содержание, так что работает надежно. В настоящее время у меня есть это, на мой взгляд:

<div class="container"> 
    <% @posts.each_slice(3) do |posts| %> 
    <div class="row"> 
    <% posts.each do |post| %> 
     <div class="col-sm-6 col-lg-4"> 
     <img src="<%= post.image %>" class="img-responsive"> 
     <h2><%= post.title %></h2> 
     <h6><%= post.created_at.strftime('%b %d, %Y') %></h6> 
     <p> <%= raw(post.body).truncate(358) %></p> 
     </div> 
    <% end %> 
    </div> 
    <% end %> 
</div> 

Но это производит ...

Я попытался изменить each_slice(3) и class="col-sm-6 col-lg-4" Однако независимо от комбинаций выбрать один из среды или большие просмотры.

Как я могу надежно достичь желаемого эффекта выше, независимо от количества элементов на странице?

Answer 1

Когда содержание столбцов является такой же высоты, сетка обертывания равномерно: http://www.codeply.com/go/8w2INqz3e1

Когда содержание колонн разной высоты, сетка оборачивает неравномерно, в результате чего зазоры .. http://www.codeply.com/go/1LBtvtDnzA

чтобы исправить это, вам нужно использовать реагирующие сбросы, как описано в этом ответе ..

Bootstrap row with columns of different height

Например, CSS clearfix подход в вашем случае будет работать, как это ..

@media (min-width: 1200px) { 
    .row > .col-lg-4:nth-child(3n+1) { 
     clear: left; 
    } 
} 

@media (max-width: 992px) { 
    .row > .col-sm-6:nth-child(2n+1) { 
     clear: left; 
    } 
} 

http://www.codeply.com/go/LDqxBlyULr