在 Rails 中定义将拉列的默认 Foundation 网格

Question

使用 Foundation 和 Rails 定义默认网格的最佳方法是什么，它将检查行中的项目数并拉出列以维护网格布局？

例如，我想要一个 3 x 3 的默认布局，总共有 9 个项目，我可能会这样做：

<% @jobs.in_groups_of(3, false) do |row| %>
  <div class="row"> 
    <% for job in row %>
      <div class="large-4 columns>
        <div class="panel">
          <% job.address %>
          <% job.state %>
          <% job.postcode %>
        </div> 
      </div>
    <% end %>
  </div>
<% end %>

如果我正好有 9 个项目，我的视图将呈现如下：

   <div class="row"> 
      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>
    </div>

    <div class="row"> 
      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>
    </div>

    <div class="row"> 
      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>
    </div>

但通常会发生的情况是，您最终得到的不是 9 个项目，而是 7 个或 8 个项目，这意味着您必须开始向最后一个项目添加拉动 class - 如下所示：

    <div class="row"> 
      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 pull-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>
    </div>

或者：

    <div class="row"> 
      <div class="large-4 pull-8 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>
    </div>

Answer 1

在更彻底地阅读 Foundation documentation 之后，当某行的计数加起来不等于 12 时，您可以添加 "end"。这会停止元素向右的默认浮动。虽然这不是 Rails 循环中的完美解决方案，但只需将其添加到每一列即可解决问题，并且不会出现意外行为。

<% @jobs.in_groups_of(3, false) do |row| %>
  <div class="row"> 
    <% for job in row %>
      <div class="large-4 columns end>
        <div class="panel">
          <% job.address %>
          <% job.state %>
          <% job.postcode %>
        </div> 
      </div>
    <% end %>
  </div>
<% end %>

在 Rails 中定义将拉列的默认 Foundation 网格

Define default Foundation grid in Rails that will pull columns

layout

ruby-on-rails

zurb-foundation