Django模板实现每行三列数据渲染的问题求助

你的代码问题出在row标签的开闭逻辑错误，导致HTML结构混乱，破坏了Bootstrap的网格布局规则，所以列无法对齐。以下是两种无需修改视图的正确实现方式：

方法一：通过循环计数器控制row标签（推荐） #

直接在模板里利用forloop的计数器，精准控制row的开启和闭合，确保每个row包含最多3个列：

<div class='container'>
    {% for category in categories %}
        {% if forloop.counter0|divisibleby:3 %}
            {% if not forloop.first %}
                </div>
            {% endif %}
            <div class="row">
        {% endif %}

        <div class="col-6 col-md-4">
            <h3>{{ category.category_name }}</h3>
            {% for page in category.page_set.all %}
                <p>{{ page.page_title }}</p>
            {% endfor %}
        </div>

        {% if forloop.last %}
            </div>
        {% endif %}
    {% endfor %}
</div>

逻辑说明 #

• 当循环到第0、3、6...个分类（forloop.counter0从0开始计数）时，先闭合上一行的row（如果不是第一个分类），再开启新的row
• 每个分类对应一个col-6 col-md-4容器，在移动端显示2列，桌面端显示3列
• 循环结束时，强制闭合最后一行的row，避免标签不闭合

方法二：模板内分组渲染 #

如果觉得计数器逻辑不够直观，可以把categories按每3个一组拆分，每组对应一个row：

<div class='container'>
    {% with total_groups=(categories|length + 2) // 3 %}
        {% for group in 0|range:total_groups %}
            <div class="row">
                {% for category in categories|slice:group|add:":3" %}
                    <div class="col-6 col-md-4">
                        <h3>{{ category.category_name }}</h3>
                        {% for page in category.page_set.all %}
                            <p>{{ page.page_title }}</p>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    {% endwith %}
</div>

逻辑说明 #

• 先计算总组数：用(总数 + 2) // 3确保最后不足3个的分类也能组成一组
• 每组循环渲染3个分类，对应一个row容器

这两种方法都能保证HTML结构完全符合Bootstrap的网格要求，列会自动对齐，无需修改视图层的代码，只需要传递所有Category对象即可。

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