时间戳

首页 > 解决方案 > 使用 for 循环在多列中显示数据

django - 使用 for 循环在多列中显示数据

问题描述

我确信这是一个简单的答案，但对于我的生活，我无法弄清楚/找出如何去做。

我想在三个相等的列中显示我的数据库中的博客文章。当我开始查看引导文档时，这是给出的代码。

    <div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

但是，如果我去实现它，我不明白如何在不重复所有内容 3 次的情况下将 for 循环放在它上面。IE：

        {% for post in posts.all %}      
        <div class="row">
            <div class="col-sm">
                <img class="post-image" src="{{ post.image.url  }}" />
            </div>
            <div class="col-sm">
                <img class="post-image" src="{{ post.image.url  }}" />
            </div>
            <div class="col-sm">
                <img class="post-image" src="{{ post.image.url  }}" />
            </div>
        </div>                           
        {% endfor %}

如果你能指出我如何去做这件事的正确方向，那将非常感谢引导程序不是必需的。

标签： django

解决方案

视图应该“准备”数据以使其易于枚举。我们可以使用以下方法创建块：

def some_view(request):
    posts = list(Post.objects.all())
    posts = [posts[i:i+3] for i in range(0, len(posts), 3)]
    return render(request, 'some-template.html', {'products': products})

在模板中，我们可以使用双{% for … %}…{% endfor %}循环 [Django-doc]：

{% for chunk in posts %}
    <div class="row">
        {% for post in chunk %}
            <div class="col-sm">
                <img class="post-image" src="{{ post.image.url  }}" />
            </div>
        {% endfor %}
    </div>
{% endfor %}

推荐阅读