Question

我在使用bootstrap的rails中。

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

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

我试图在尝试使用bootstrap的网格系统时使用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。

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

感谢@vermin提供的nil小费！

Answer 2

我还添加了以下css。

表示div.col-md-3：

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

和图片：

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

Bootstrap网格系统格式化Rails中的照片

2 个答案: