在 Rails 中引导网格系统格式化照片

Question

我正在使用引导程序。

我有一个包含许多产品的产品网站。我需要为“店面”以网格格式显示我的产品。每个产品都有一张照片和一些信息。

我看到了 this 和 this 的帖子，但它们不是我想要的。

我正在尝试使用 product.each 迭代每个产品，同时尝试使用引导程序的网格系统。

随着时间的推移，我需要添加其他产品，因此需要每个产品从一排流到下一排。 我没有在 bootstrap 之外使用任何额外的 CSS 样式。

到目前为止，我似乎每个产品都在下降到下一行并且每个产品都在它自己的列中，但是我尝试调整每个产品所在的图像或 div 或 col 的大小，一切都变得不对齐.

这是我的 html.erb 文件：

<div class="row">
 <% @products.each do |product| %>
  <div class="col-md-3">
   <div id="storeimages">
    <%= image_tag(product.image_url, class: "img-responsive") %>
    <h3><%= product.title %></h3>
    <div><%= sanitize(product.description) %></div>
    <div><%= number_to_currency(product.price) %></div> 
    <%= button_to 'Add to Cart', line_items_path(product_id: product), 
         class: 'btn btn-info btn-sm', remote: true %>
   </div>
  </div>
 <% end %>
</div>

Answer 1

假设你想要 4 列的行，你可以这样做：

<% @products.in_groups_of(4, false).each do |group| %>
  <div class='row'>
    <% group.each do |product| %>
      <div class='col-md-3'>
        <%= image_tag(product.image_url, class: "img-responsive") %>
        <h3><%= product.title %></h3>
        <div><%= sanitize(product.description) %></div>
        <div><%= number_to_currency(product.price) %></div> 
        <%= button_to 'Add to Cart', line_items_path(product_id: product), class: 'btn btn-info btn-sm', remote: true %>
      </div>
    <% end %>
  </div>
<% end %>

这会将您的数据集分成 4 个项目的组，然后为每个组输出一个行 div。然后在每一行中，它在自己的列 div 中输出组的每个成员。

传递给in_groups_of 的false 确保您不会尝试为少于4 个项目的行输出列。如果您的产品总数不能被 4 整除，这将发生在您的最后一行，因为默认情况下，该函数将使用 nil 填充数组。

感谢@vermin 提供fill_with 提示！

Answer 2

我还添加了以下 css。

对于 div.col-md-3：

#productdescription { 
 height: 375px;
 width: 200px;
}

对于图片：

   #img {
     height: 200px;
     width: 180px;
     overflow: hidden;
    }