如何在Ruby on Rails上使用Bootstrap Scss來創建帖子列表

Question

我正在製作一個基本的Ruby on Rails應用程序，用戶可以在其中創建&查看帖子。

這是我用來顯示帖子

<% if @feed_items.any? %> 
    <ol class="posts"> 
<%= render @feed_items %> 
</ol> 
<%= will_paginate @feed_items %> 
    <% end %> 

目前我已經播種每個用戶大約50個員額用於測試和職位這樣列表中的所有顯示的代碼：

Post 1 
Post 2 
Post 3 
Post 4 etc 

我想用bootstrap scss來設計這些帖子的風格，所以不是上面的風格更像

Post 1    Post 2    Post 3 
Post 4 

哪裏有每個行3個職位，而不是隻有1個。

有沒有人有任何建議如何一個非常新的自舉scss可以接近這個？

Answer 1

您可以使用in_groups_of和bootstrap grid system組合

<% if @feed_items.any? %> 
    <% @feed_items.in_groups_of(3).each do |feeds| %> 
    <div class="row"> 
     <% feeds.each do |feed| %> 
     <div class="col-md-4"> 
      <%= render feed %> 
     </div> 
     <% end %> 
    </div> 
    <% end %> 
<% end %> 

Answer 2

此代碼連續顯示3個項目。

<ul class="list-group"> 
    <li class="list-group-item col-md-4">Post 1</li> 
    <li class="list-group-item col-md-4">Post 2</li> 
    <li class="list-group-item col-md-4">Post 2</li> 
</ul> 

https://v4-alpha.getbootstrap.com/components/list-group/

Answer 3

我認爲in_groups_of是一個很好的適合你的需要。

將下面的代碼劃分您的飼料項目收集到的3排組，然後只要你喜歡，你可以格式化每組3：

<% if @feed_items.any? %> 
    <table> 
    <% @feed_items.in_groups_of(3).each do |row_feed| %> 
    <tr> 
     <% for feed in row_feed %> 
     <td><%= feed.title %></td> 
     <% end %> 
    </tr> 
    <% end %> 
    </table> 
    <%= will_paginate @feed_items %> 
<% end %>