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

【问题标题】：Display articles from database in bootstrap columns在引导列中显示数据库中的文章
【发布时间】：2018-09-27 17:03:30
【问题描述】：

我有一个庞大的文章数据库，我想在引导程序中显示它们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 然后开始一个新的？

【问题讨论】：

这是 bootstrap4 吗？在引导程序 3 中，您将执行 <div class="col-md-4"> 并且在 md 和更大尺寸的屏幕上将采用 12 列中的 4 列。我认为你可以在 bootstrap 4 中做同样的事情

标签： django twitter-bootstrap django-templates

【解决方案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>

【讨论】：