使用Jinja迭代Bootstrap卡片组：单卡片并排问题求助

你的代码存在两个核心问题导致布局异常：

• 第一次循环时（n=0），错误输出了一个不存在的card-group闭合标签，破坏了HTML结构
• 嵌套的重复条件判断完全多余，进一步加剧了结构错误

方案一：修正计数逻辑 #

调整判断条件，避免初始阶段输出无效标签，确保HTML结构完整：

{% set n = 0 %}
<!-- 初始化第一个卡片组 -->
<div class="card-group">
{% for vid in videos %}
    {% if n > 0 and n % 4 == 0 %}
        </div> <!-- 关闭上一个卡片组 -->
        <div class="card-group"> <!-- 开启新的卡片组 -->
    {% endif %}
    <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    {% set n = n + 1 %}
{% endfor %}
</div> <!-- 关闭最后一个卡片组 -->

关键修改点：

• 循环前提前创建第一个card-group，避免初始结构缺失
• 增加n > 0的判断，仅在已处理过卡片且达到4张时，才切换卡片组
• 移除了嵌套的重复条件判断

方案二：使用Jinja的batch过滤器（更简洁） #

Jinja内置的batch过滤器可以直接将列表按指定数量分组，代码更简洁且不易出错：

{% for video_group in videos|batch(4) %}
    <div class="card-group">
        {% for vid in video_group %}
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        {% endfor %}
    </div>
{% endfor %}

这个方法的优势：

• 无需手动维护计数器，逻辑更直观
• 自动处理最后一组不足4张卡片的情况
• HTML结构天然完整，不会出现标签不匹配的问题

内容的提问来源于stack exchange，提问作者Тарас Дзебчук