如何在 ruby​​ on rails 中以网格的形式从数据库中检索数据

Question

我想以网格的形式从数据库中检索数据，为此我使用引导列，但默认情况下，在 ruby​​ on rails 5 中，数据将以列表的形式检索。这是我的视图代码`

<div class="row">
            <div class=col-md-3>
                <% unless @fridges.blank? %>
                <% @fridges.each do |fridge| %>
                <div class="card card-cascade narrower">
                    <div class="view overlay hm-white-slight">
 <%= image_tag(fridge.image.url(:medium), :alt => "Fridge Item", :class => "img-fluid")%>
                        <a>
                            <div class="mask waves-effect waves-light"></div>
                        </a>
                    </div>
                    <div class="card-block text-center">
                        <a href class=text-muted>
                            <h5><%= fridge.Amount %></h5>
                        </a>
                        <h4 class=card-title>
                            <strong>
                               <%= link_to fridge.Name, fridge_path(fridge) %>
                            </strong>
                        </h4>
                        <div class=card-footer>
                            <span class=left><%= fridge.Amount %></span>
                            <span class=right>
                                <%= truncate(fridge.Quantity) %>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <% end %>
    </div>`

表名 = 冰箱，here is the screen shot 我想显示数据。所有样式都正常工作，但唯一的问题是数据以列表形式check here 显示。请帮助我，谢谢。

Answer 1

您的“col-md-3”丢失了“，您必须将列大小放在每个循环中，这是您可以尝试的修订版

<div class="row">
  <% unless @fridges.blank? %>
    <% @fridges.each do |fridge| %>
      <div class="col-md-3">
        <div class="card card-cascade narrower">
            <div class="view overlay hm-white-slight">
              <%= image_tag(fridge.image.url(:medium), :alt => "Fridge Item", :class => "img-fluid")%>
                <a>
                    <div class="mask waves-effect waves-light"></div>
                </a>
            </div>
            <div class="card-block text-center">
                <a href class=text-muted>
                    <h5><%= fridge.Amount %></h5>
                </a>
                <h4 class=card-title>
                    <strong>
                       <%= link_to fridge.Name, fridge_path(fridge) %>
                    </strong>
                </h4>
                <div class=card-footer>
                    <span class=left><%= fridge.Amount %></span>
                    <span class=right>
                        <%= truncate(fridge.Quantity) %>
                    </span>
                </div>
            </div>
        </div>
      </div>
    <% end %>
  <% end %>
</div>