在引導程序/ 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中動態創建行和列

回答

相關問題