在Rails中使用Bootstrap网格系统格式化照片

Question

我正在使用Rails和Bootstrap。

我的网站上有很多产品，我需要在“商店前台”以网格格式显示我的产品。每个产品都有一张照片和一些信息。

我看到了这篇文章和这篇文章，但它们不是我要找的。

我正在尝试使用product.each迭代每个产品，并尝试使用Bootstrap的网格系统。

随着时间的推移，我将需要添加更多的产品，因此需要每个产品从一行流转到下一行。我没有在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>

- kacy hulme

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 提示！

- Jon

---

你可以使用: fill_with选项来避免进行if product： in_groups_of(4, false) - vermin

谢谢@vermin - 我已经更新了我的答案来涵盖这个问题。 - Jon

我也遇到了一个非常简单的问题，很容易修复。 - DNorthrup

你如何根据打开它的设备的尺寸，响应式地更改方法in_groups_of中每组数量的4个参数？ - JuanM.

如果您想要实现响应式布局，最好使用类似flexbox或其他CSS解决方案。如果希望其响应屏幕尺寸，这不是可以从服务器端生成的内容。 - Jon

Answer 2

我还添加了以下CSS。

对于div.col-md-3：

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

对于图片：

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

- kacy hulme