HAML + Bootstrap div.row和div.spanX，每N个元素换一行

Question

我找到了this question，答案正是我试图开始的。但是，它没有产生预期的结果。

给定数组@items，我想为每3个项目创建一个新行。这是我目前的标记：

- @items.each_with_index do |item, index|
  - if index % 3 == 0
    %div.row-fluid
  %div.span4
    %div.item-container
      use item

这会导致html像这样呈现

<div class="row-fluid"></div>
<div class="span4">...</div>
<div class="span4">...</div> 
<div class="span4">...</div>
<div class="row-fluid"></div>
<div class="span4">...</div>
<div class="span4">...</div> 
<div class="span4">...</div>

当然，我想要的是：

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4">...</div> 
    <div class="span4">...</div>
</div>
<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4">...</div> 
    <div class="span4">...</div>
</div>

我在哪里错了？

Answer 1

使用Array#in_groups_of分割收集然后重复它：

- @items = (1..20).to_a
- @items.in_groups_of(3, false).each_with_index do |group, index|
  .row-fluid
    - group.each do |item|
      .span4= "group: #{index}; item: #{item}"

提示：您可以不使用标记定义，并将其默认为%div。 %div.span4只是.span4等等。