如何在Django Bootstrap中每行显示2个span6缩略图？

问题描述

我想每行显示2个缩略图。仅使用多行对其进行硬编码，并且每行具有2个 span6 div是非常琐碎的。但是我如何在Django中使用模板for循环来做到这一点？

I would like to display 2 thumbnails per row. It would be pretty trivial to just hard-code it using multiple rows and each row has 2 span6 div's. But how would I do this in Django using a template for-loop?

示例：

{% for image in images %}
  <div class="row">
    <div class="span6">*image goes here*</div>
    <div class="span6">*image goes here*</div>
  </div>
{% endfor %}

// repeat for all items in the list, with 2 images per row

因此，在 span6 以上的代码中，应在每次循环迭代时创建，但行应该仅每2次迭代创建一次。

So, in the code above span6 should be created on every loop iteration, but the row should be created only every 2 iterations.

更新：我能够跨越所有单个行中的span6 元素。我遇到了缩略图无法正确对齐（行之间的空白）的问题。将所有缩略图设置为统一的高度可以解决此问题。但是Hedde的解决方案看起来也很不错，尽管它涉及在Python方面进行更改。

update: I was able to span all my span6 elements inside a single row. I encountered an issue where thumbnails wouldn't align properly (empty spaces between rows). Setting all thumbnails to a uniform height fixed the problem. But Hedde's solution looks pretty good too, although that involves changing things on the Python side.

推荐答案

嗯，这可以由CSS完成仅，但如果要使用提供的网格，则可以创建一个生成器并将其用于视图的查询集上，或者通过使用标签直接在模板中使用它，例如

Well it could be done by css only, but if you want to use the provided grid, you could create a generator and use it on your view's queryset or directly in a template by using a tag, e.g.

def grouped(l, n):
    # Yield successive n-sized chunks from l.
    for i in xrange(0, len(l), n):
        yield l[i:i+n]

templatetags

templatetags

@register.filter
def group_by(value, arg):
    return grouped(value, arg)

模板

{% for group in objects|group_by:2 %}
    <div class="row">
        {% for obj in group %}
            <div class="span6">
                foo
            </div>
        {% endfor %}
    </div>
{% endfor %}

这篇关于如何在Django Bootstrap中每行显示2个span6缩略图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！