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-nesting等级也是深层次的。有没有其他方法可以更简洁地处理引导行？

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

1 个答案: