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

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