ブートストラップ/レールに行と列を動的に作成する

Question

ブートストラップと一緒にレールを使用しています。不規則な数のブロックがレイアウトされているページをレイアウトしようとしています。小さな画面では、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