在Rails中定義默認的基礎網格，將拉動列

使用Foundation和Rails定義默認網格的最佳方式是什麼？它將檢查一行中的項目數並拉動列來維護網格佈局？在Rails中定義默認的基礎網格，將拉動列

例如，我要一個默認的佈局是3×3等於在總共9個項目我可能會做這樣的事情：如果我有整整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 %>

：

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

或者：

來源

2015-01-05 Thomas Taylor

閱讀Foundation documentation更徹底，你可以添加「結束」當行沒有計數加起來12之後停止默認的浮動元素的對。雖然在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 %>

來源

2015-01-09 07:28:45

在Rails中定義默認的基礎網格，將拉動列

回答

相關問題