如何使用不同列和行上的帖子组织我的视图

时间:2013-12-04 14:28:03

标签: css ruby-on-rails ruby twitter-bootstrap

我正在使用Ruby on rails和bootstrap实现一个网站。 我为用户提供了几个帖子(带文字的小文字),我想在屏幕上打印它们。 我使用will_paginate使它们出现在不同的页面上。但我的问题是当我想在页面上组织它们时,目前我使用

所以我的页面看起来像:

  User : post
  User : post
  User : post
      ...

但我想:

User : post        User : post      User : post
User : post        User : post      User : post
User : post        User : post      User : post
                        ....

修改 我的实际观点:

_feed.html.erb

<% if @feed_items.any? %>
  <ol class="microposts">
    <%= render partial: 'shared/feed_item', collection: @feed_items %>
  </ol>
  <%= will_paginate @feed_items %>
<% end %>

_feed_item.html.erb

<li id="<%= feed_item.id %>">
  <%= link_to gravatar_for(feed_item.user), feed_item.user %>
  <span class="user">
    <%= link_to feed_item.user.name, feed_item.user %>
  </span>
  <span class="photo">
    <% if feed_item.image? %>
    <%= image_tag feed_item.image.url %>
    <% end %>
  </span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(feed_item.created_at) %> ago.
  </span>
  <% if current_user?(feed_item.user) %>
  <%= link_to "delete", feed_item, method: :delete,
  data: { confirm: "You sure?" }%>
  <% end %>
</li>

最终修改:结果

<% if @feed_items.any? %>
  <% @feed_items.each_slice(3) do |slice| %>
    <% slice.each do |photo| %>
    <ol class="microposts">
      <%= render partial: 'shared/feed_item', collection: @feed_items %>
    </ol>
    <%end%>
  <% end %>
  <%= will_paginate @feed_items %>
<% end %>

1 个答案:

答案 0 :(得分:1)

我实际上刚刚遇到过这个问题。我最终这样做的方式是使用each_slice方法。这真的很方便!它看起来像是:

<% if @feed_items.any? %>
  <% @feed_items.each_slice(3) do |feed_items_slice| %>
    <ol class="microposts">
      <%= render partial: 'shared/feed_item', collection: feed_items_slice %>
    </ol>
  <% end %>
  <%= will_paginate @feed_items %>
<% end %>

显然风格必须改变。我建议将li标记浮动到左侧,然后清除ol标记:两者都是为了确保它放在新行上。