对齐django模板的动态图像数量

Question

我有一个django模板，可以获取一组图像。图像数量各不相同。我想在模板文件中对齐它，如每行3个图像。图像的正常显示不对齐。创建一个

<div class="col-md-4">
</div>

每张图像在3张图像后格式错误。我如何使用django本身或在bootstrap中获取它？

Answer 1

如果我理解正确，您需要在3个物品后关闭row。

要执行此操作，您应该查看Django文档中有关built-in template tags的forloop.counter模板标记和divisibleby过滤器。

Answer 2

您似乎想在django模板中将列表拆分为大小相同的块。

以下snippet会有所帮助。

模板标签代码：

from django import template

register = template.Library()

@register.filter(name='chunks')
def chunks(iterable, chunk_size):
    if not hasattr(iterable, '__iter__'):
        # can't use "return" and "yield" in the same function
        yield iterable
    else:
        i = 0
        chunk = []
        for item in iterable:
            chunk.append(item)
            i += 1
            if not i % chunk_size:
                yield chunk
                chunk = []
        if chunk:
            # some items will remain which haven't been yielded yet,
            # unless len(iterable) is divisible by chunk_size
            yield chunk

模板代码：

{% for chunk in images|chunks:3 %}
    <div class="row">
        {% for image in chunk %}
            <div class="col-md-4">
                {{image}}
            </div>
        {% endfor %}
    </div>
{% endfor %}