如何 "Each do |article|" 但在每 n 篇文章之后它必须在新行中开始（基础）

Question

我得到了这个 Rails 博客应用程序，对于发布文章的 indexpage 它显示 short 版本的文章。

  <%= render 'layouts/header' %>

  <%= render 'layouts/topbar' %>

<div class="contentnews">
  <%= render 'layouts/bannerad' %>
    <div class="row">
      <% if current_user.try(:admin?) %>
        <%= link_to 'Nieuws toevoegen', new_article_path, :class => "button ala" %>
      <% end %>
    </div>
    <div class="row">
       <%= render 'overview' %>
    </div>
</div>

部分概述：

   <div class="articlebox ">
    <div class="large-4 columns">
      <% @articles.reverse_each do |article| %>
        <div class="articlebox2">
        <div class="articleindex">
          <%= link_to article.title, article %>
        </div>
        <div class="articlebody">
          <%= article.short.to_s.html_safe %>
        </div>
      </div>
      <% end %>
    </div>
  </div>

问题是这样所有的文章都排成一行。我希望它在页面上显示内嵌的短文章，并且在每两三篇文章之后它必须在新的一行中再次开始两三篇短文章。

有人知道吗？

Answer 1

您实际上不需要为每个 n 个元素创建一行。使用 foundation 只需将所有元素包裹在一行中，并给它们列 class:

<div class="articlebox">
<div class="large-4 columns">
  <div class="row"> <!-- Wrap in  a row -->
    <% @articles.reverse_each do |article| %>
      <div class="articlebox2 large-6 columns"> <!-- Give a column and width class here -->
         ...
    </div>
  <% end %>
</div>

所以你可以用 foundation 嵌套网格，不需要创建新行，如果元素超出网格，foundation 会自动换行。

如果你真的很想创建行，你可以看看方法each_with_index API 然后插入行元素if index % 2 == 0。但这是不必要的复杂性。

如何 "Each do |article|" 但在每 n 篇文章之后它必须在新行中开始（基础）

how to "Each do |article|" but after every n-articles it has to start in a new row(foundation)

css

ruby

zurb-foundation

ruby-on-rails-5