在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