在Rails中定义将拖动列的默认基础网格

Question

使用Foundation和Rails定义默认网格的最佳方法是检查一行中的项数并拉出列来维护网格布局。

例如，我想要一个默认的布局，即3x3等于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项，这意味着您必须开始在最后一项中添加拉类--如下所示：

    <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

在更彻底地阅读基金会文件之后，当一行没有加起来为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 %>