动态列和行自举/导轨

问题描述：

布局难题在这里。我有一个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>

我可以做这与红宝石或将jQuery更适合在这里..我需要做一些计数？

任何提示赞赏让我对我的方式

感谢

我之前已经回答了类似的问题。看看[它]（http://*.com/questions/25961186/solution-to-break-table-td-into-rows-of-6-or-less/25961402#25961402）。 – Regent 2014-10-03 12:14:33

谢谢，生病现在看看 – Richlewis 2014-10-03 12:16:04

答

您可以使用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 %>

谢谢，那就是我正在寻找的，红宝石解决方案:-) – Richlewis 2014-10-03 12:37:24

答

易

<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>

第一个索引是'0'。它是否会在第一次迭代中添加一个空的'div'？ – spickermann 2014-10-03 22:18:14

@crackedmind'@ object.to_enum.with_index（1）do | v，i |'会更好。 – Edgars 2015-01-05 07:42:23

动态列和行自举/导轨

相关推荐