Question

我在这里有一个布局难题。我有一个Ruby块，遍历记录并将每个记录放在一行中的col-md-4中。

<div class="row">
 <% @object.each do |object| %>
   <div class="col-md-4">
    <%= object %>
   </div>
 <% end %>
</div>

如果我有6条记录，我会得到这个结果（我只提供HTML）：

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

我该怎么做才能得到这个结果？

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

我可以用Ruby做这件事，还是jQuery更适合这里。我需要做些什么吗？

Answer 1

您可以使用each_slice(x)分解3个集合中的@object。然后在每次迭代时包含行，然后遍历对象以显示对象。

 <% @object.each_slice(3) do |objects| %>
  <div class="row">
    <% objects.each do |object| %>
     <div class="col-md-4">
      <%= object %>
     </div>
    <% end %>
  </div>
 <% end %>

Answer 2

易

<div class="row">
    <% @object.each_with_index do |v,i| %>
        <% if i % 4 == 0 %>
            </div><div class="row">
        <% end %>
        <div class="col-md-3">
            <%= object %>
        </div>
    <% end %>
</div>

Bootstrap / Rails中的动态cols和行

2 个答案: