如何在for循环中动态处理bootstrap行？

Question

我遍历了一系列我想展示的任务。每个元素都有bootstrapclasscol-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-嵌套级别太深了。关于如何以更简洁的方式处理 bootstrap 行，还有另一种方法吗？

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

如何在for循环中动态处理bootstrap行？

How to dynamically handle bootstrap rows in for loop?

for-loop

twig

twitter-bootstrap-3