在 Rails 中定义将拉列的默认基础网格答案

【问题标题】：Define default Foundation grid in Rails that will pull columns在 Rails 中定义将拉列的默认基础网格
【发布时间】：2015-01-09 15:28:45
【问题描述】：

使用 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>

通常会发生的情况是，您最终会得到 7 或 8 个而不是 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 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>

【问题讨论】：

标签： ruby-on-rails layout zurb-foundation

【解决方案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 %>

【讨论】：