Zurb基金會和RoR的縮略圖

Question

所以我最近開始使用Zurb基金會，並且遵循this documentation。

我有以下代碼是數據庫中所有設計的鏈接。

<div> 
    <div class="small-4 small-offset-4 rows"><h2>Most Downloaded</h2></div> 
    <% @designs.each do |design| %> 
    <div><%= link_to design.title, design_path(design) %></div> 
    <% end %> 
</div> 

我想要幫助爲每個鏈接創建縮略圖。爲了獲得它的要點，我想爲所有縮略圖使用相同的圖片。我使用a.th類包裝圖像，但我想了解如何在每一行上顯示多個（通常爲3個）縮略圖。

因此，讓我們說總共有9個設計，我想要3行3個縮略圖。我無法找到許多教程/解釋，所以任何提示將有助於瞭解它是如何工作的。

Answer 1

查看基金會的網格：http://foundation.zurb.com/docs/components/block-grid.html。

我認爲它只是你所追求的。要得到一個3×3縮略圖網格看起來像這樣：

<div> 
     <div class="small-4 small-offset-4 rows"><h2>Most Downloaded</h2></div> 
     <div class="row"> 
      <ul class="small-block-grid-3"> 
      <% @designs.each do |design| %> 
       <li><%= link_to design.title, design_path(design), class: "th" %></li> 
      <% end %> 
      </ul> 
     </div> 
    </div>