Django中的Bootstrap樣式

Question

通常是在引導程序中看到CSS / HTML，我們遇到了以下模板。

    <div class="row">
      <div class="col-sm-6">
        # Add image/ or data you want
      </div>
      <div class="col-sm-6">
        # Add image/ or data you want
      </div>
    </div>

    # Second row

    <div class="row">
      <div class="col-sm-6">
        # Add image/ or data you want
      </div>
      <div class="col-sm-6">
        # Add image/ or data you want
      </div>
    </div>

我們如何在Django模板中實現此行為？ 我的意思是，當我們遍歷值列表時，如何跟蹤我們需要啟動一個新的.row ？

臟溶液

檢查循環迭代計數並進行整數操作以檢查是否應啟動新的.row元素。

思考？

Answer 1

這有效：

{% for obj in objects %}
{% if not forloop.counter|divisibleby:2 and forloop.last %}
    <div class="row">
        <div class="col-md-6">
            {{ obj }}
        </div>
    </div>
{% elif not forloop.counter|divisibleby:2 %}
    <div class="row">
        <div class="col-md-6">
            {{ obj }}
        </div>
{% elif forloop.counter|divisibleby:2 %}
        <div class="col-md-6">
            {{ obj }}
        </div>
    </div>
{% endif %}
{% endfor %}

此解決方案使用Django內置標簽和過濾器。 您可以考慮創建自定義標簽，但這超出了問題的范圍。

Django： For循環 ， 自定義標簽

Answer 2

創建一個模板過濾器，用於將列表分成多個塊：

from django import template

register = template.Library()

@register.filter
def chunks(l, n):
    n = max(1, int(n))
    return (l[i:i+n] for i in xrange(0, len(l), n))

用法：

{% for chunk in images|chunks:2 %}
    <div class="row">
        {% for image in chunk %}
            <div class="col-sm-6">
                # Add image/ or data you want
            </div>
        {% endfor %}
    </div>
{% endfor %}

您也可以在將列表發送到模板之前將其拆分為多個塊。

有關如何將列表分成多個塊的更多信息，請參見： 如何將列表分成大小均勻的塊？

填充列表的自定義過濾器：

@register.filter
def ljust_list(l, n):
    """
    ljust_list([1, 2], 4) -> [1, 2, None, None]
    """
    return l + [None] * (n - len(l))

@register.filter
def rjust_list(l, n):
    """
    rjust_list([1, 2], 4) -> [None, None, 1, 2]
    """
    return [None] * (n - len(l)) + l

用法：

{% for chunk in images|chunks:2 %}
    <div class="row">
        {% for image in chunk|ljust_list:2 %}
            <div class="col-sm-6">
                # Add image/ or data you want
            </div>
        {% endfor %}
    </div>
{% endfor %}