如何根据django中的屏幕大小将模型列表分布到行和列中？

Question

我想将模型列表分解为行和列，我正在使用forloop进行迭代。

我试过了

{% if forloop.counter|divisibleby:4 %}

<div class="row m-3">
    <div class="col-12">
        <div class="row mt-3">
        {% for Collection in object_list %}

        {% if forloop.counter|divisibleby:4 %}
        <div class="row mt-3">
        {% endif %}
           <div class="col-6 col-sm-3">
               <div class="dark">
               <a>
                   <div style="background-image:url({{ Collection.img }})" class="Collection">
                       </div>
                       <h3 class="title-banner text-center">{{ Collection.Name }}</h3>
               </a>
            </div>
               </div>

{% if forloop.counter|divisibleby:4 %}
        </div>
        {% endif %}
{% endfor %}
            </div>
        </div>
</div>

我的问题就像qazxsw poi。

但是这个解决方案并不适合我，因为它不允许我从html文件中更改group-by变量。我需要能够更改它，因为移动设备上只有两个列，计算机上只有四个列。有人可以编辑该答案（第一个）并在此处发布，以便我可以根据屏幕从html文件中更改该变量。

Answer 1

你可以使用jinja2提供的How to display 2 thumbnails of span6 per row in Bootstrap with Django?：

考虑你的代码：

slice() filter

您还可以查看

<div class="row m-3">
    <div class="col-12">
        <div class="row mt-3">
        {% for Collection in object_list|slice(4) %}
           <div class="col-6 col-sm-3 {{ loop.index }}">
               {% for item in column %}
               <div class="dark">
               <a>
                   <div style="background-image:url({{ Collection.img }})" class="Collection"></div>
                   <h3 class="title-banner text-center">{{ Collection.Name }}</h3>
               </a>
            </div>
               {% endfor %}
               </div>
        {% endfor %}
        </div>
    </div>
</div>

，它允许您管理上一列的缺失元素。