Question

我有一个庞大的文章数据库，我想在bootstrap rows中显示它们（每行3篇文章）：

<div class="container">
    <h1 class="mt-4 mb-4 text-center display-4">All News </h1>
    <div class="row">
        {% for article in articles %}
            <div class="col-md">
                <div class="card">
                    <h2 class="pt-2"><a href="#">{{ article.title }}</a></h2>
                    <p class="lead"> {{ article.description }}</p>
                </div>
            </div>
    {% endfor %}
    </div>
</div>

问题是row是在for语句之外创建的，因此每篇文章都会被压缩为一个row（每个row应该有3篇文章）。有没有办法循环遍历for语句，并将3篇文章放在一个row中，关闭row然后开始一个新文章？

Answer 1

您可以尝试使用forloop.counter的值来每三次迭代更改一次行为。

<div class="container">
    <h1 class="mt-4 mb-4 text-center display-4">All News </h1>
    <div class="row">
        {% for article in articles %}
            {% if forloop.counter|divisibleby:3 %}
                <div class="row">
            {% endif %}
            <div class="col-md">
                <div class="card">
                    <h2 class="pt-2"><a href="#">{{ article.title }}</a></h2>
                    <p class="lead"> {{ article.description }}</p>
                </div>
            </div>
            {% if forloop.counter|divisibleby:3 %}
                </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

在引导列中显示数据库中的文章

1 个答案: