在引导程序/ rails中动态创建行和列

将引导程序与Rails一起使用我试图布置一个页面，该页面上有未知数量的内容块。在小屏幕上应该有1列，中屏2列，大屏幕3列。在引导程序/ rails中动态创建行和列

如...

但是我不能工作了怎么给的内容，以便它可以可靠地工作。目前我有这在我的观点：

<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"但是不管组合我选择介质之一或大观点休息。

无论页面上有多少项目，我如何可靠地达到上述效果？

来源

2016-11-25 dwkns

箱4撞越来越下降，因为无论箱三是有点太宽，或箱2太高，所以布局正在打破。如果您对这些框的高度设置了硬限制，那么布局会按照您希望的方式进行设置？ –

如果解决了问题，则不行;-)在每个块中都会有一个图像（响应），一个标题，一个日期和一个文本块。如果太长，文本块将被截断。然而，文本块可以是固定的高度，这意味着每个内容块可以是固定的高度。 – dwkns

设置高度并没有什么区别。 – dwkns

当列的内容是相同的高度，网格包装均匀： 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

来源

2016-11-25 14:46:39 ZimSystem

其实真正的问题是我创建了多行而不是仅仅创建一个.http：//www.bootply.com/hL0Q7I9kmy当我只创建一行时，高度问题就出现了。但它给了我一个解决方案。谢谢。 – dwkns

在引导程序/ rails中动态创建行和列

回答

相关问题