使用Bootstrap的Grid系统在响应式视图上动态生成所有产品

Question

我想使用bootstrap的网格系统在页面上生成我的所有产品及其信息.我首先尝试连续生成三个产品,它使用以下代码:

<div class="container">
  <h1 align="center">Listing products</h1>

    <% @products.each do |product| %>
      <% if @a%3 == 0 %>
          <div class="row">
      <% end %>
                <div class="col-lg-4">
                  <%= image_tag(product.image_url, class: 'list_image', size: '260x320') %>
                  <%= product.title %> <br/>
                  <%= product.price %> <br/>
                  <%= link_to 'Show', product %><br/>
                </div>
      <% @a = @a+1  %>
      <% if @a%3 == 0 %>
          </div><hr/>
      <% end %>
  <% end %>
</div>

(@a是我在控制器中声明的最初设置为0)

如果我想在屏幕变小时仅使用网格系统连续显示两个或更少的产品,则代码将不再起作用.

有没有更好的想法来实现这一目标？

Answer 1

好像你生成了错误的HTML标记.尝试使用each_slice:

<div class="container">
  <h1 align="center">Listing products</h1>

    <% @products.each_slice(3) do |products| %>
          <div class="row">
            <% products.each do |product| %>
                <div class="col-lg-4">
                  <%= image_tag(product.image_url, class: 'list_image', size: '260x320') %>
                  <%= product.title %> <br/>
                  <%= product.price %> <br/>
                  <%= link_to 'Show', product %><br/>
                </div>
            <% end %>    
          </div>
          <hr/>
  <% end %>
</div>