如何動態處理for循環中的引導行？

Question

我循環了一系列我想要顯示的任務。每個元素都有引導類col-md-3。目前的行爲是將它們全部轉儲到一行上。

<div class="row"> 
{% for task in taskList.taskList %} 
    {% include 'dashboard/task.twig' %} // contains a div.md-3 
{% endfor %} 
</div> 

存在一些堆疊問題，因爲在一行中有時會看到五個元素，而最後兩個元素在彼此之下。

因此，因爲我使用的是md-3列，我現在要強制執行的是每行都有4個元素。

這是我目前的解決方案：

{% for task in taskList.taskList %} 
    {% if loop.first %} 
     <div class="row"> 
     {% include 'dashboard/task.twig' %} // contains a div.md-3 
    {% elseif loop.index % 4 == 0 %} 
     {% include 'dashboard/task.twig' %} // contains a div.md-3 
     </div> 
     {% if not loop.last %} 
      <div class="row"> 
     {% endif %} 
    {% elseif loop.last %} 
     {% include 'dashboard/task.twig' %} // contains a div.md-3 
     </div> 
    {% else %} 
     {% include 'dashboard/task.twig' %} // contains a div.md-3 
    {% endif %} 
{% endfor %} 

我不滿意多個包括，還有的if-else-嵌套層次的方式來深。有一種更簡潔的方式來處理引導行嗎？

Answer 1

如何這樣的事情，簡化了一點無論如何：

{% for task in taskList.taskList %} 
    {% if loop.index % 4 == 0 %} 
     <div class="row"> 
    {% endif %} 

    {% include 'dashboard/task.twig' %} // contains a div.md-3 

    {% if (loop.index % 4 == 0 or loop.last) %} 
     </div> 
    {% endif %} 

{% endfor %}