如何在Django模板中将卡片组分为每行4-5张卡片？

我懂你要实现的效果——把书籍卡片按每行4或5张分组展示，之前的思路方向是对的，但需要调整循环结构，确保每个card-deck容器能正确包裹对应数量的卡片元素。

下面给你两种直接可用的方案，分别对应每行5张和每行4张的需求：

方案1：每行显示5张卡片 #

{% for book in books %}
    {% if forloop.counter0|divisibleby:5 %}
        {% if not forloop.first %}</div>{% endif %}
        <div class="card-deck">
    {% endif %}
    {% include 'books/book_element.html' %}
    {% if forloop.last %}</div>{% endif %}
{% endfor %}

逻辑拆解： #

• 用forloop.counter0（从0开始的循环索引）来判断分组时机，这样第1-5、6-10...组会在索引0、5、10的位置创建新的card-deck容器
• 创建新容器前，先判断是不是第一次循环，如果不是，就闭合上一个容器，避免标签嵌套错误
• 循环结束时手动闭合最后一个card-deck，防止出现未闭合的HTML标签

方案2：每行显示4张卡片 #

只需要把上面代码里的divisibleby:5改成divisibleby:4即可：

{% for book in books %}
    {% if forloop.counter0|divisibleby:4 %}
        {% if not forloop.first %}</div>{% endif %}
        <div class="card-deck">
    {% endif %}
    {% include 'books/book_element.html' %}
    {% if forloop.last %}</div>{% endif %}
{% endfor %}

额外小提示： #

如果你的book_element.html里的卡片没有设置合适的宽度样式，记得给卡片添加对应的布局类（比如Bootstrap的col-md-3对应每行4张，col-md-2.4对应每行5张），配合card-deck才能实现均匀分布的效果哦。

内容的提问来源于stack exchange，提问作者Beacon