twitter-bootstrap 用于填充引导行和列的 django 模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20309593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
django template to populate bootstrap rows and columns
提问by sinwav
So here's my problem: I've got a bunch of instances of a class. I would like to have a sort of table of these instance objects, so that there is a maximum of six in every row. In bootstrap terms, I would like each object to be represented by a thumbnail in a "div" of class "span2".
所以这是我的问题：我有一堆类的实例。我想要一种这些实例对象的表格，以便每行最多有六个。在引导程序方面，我希望每个对象都由“span2”类的“div”中的缩略图表示。
My initial impulse was to use a nested for loop, but I am having trouble manipulating my index variable in the template, and I can't figure out how to do so outside of my template.
我最初的想法是使用嵌套的 for 循环，但是我在模板中操作索引变量时遇到了麻烦，而且我不知道如何在模板之外执行此操作。
Here is generally what the python/django template/pseudo code is I'm trying to figure out.
这通常是我试图弄清楚的 python/django 模板/伪代码。
queryset = Class.objects.all()
set_length = queryset.count()
num_rows = set_length/6
#because I want 6 columns in each row, each with one instance
set_as_list = list(queryset)
# have a list so I can iterate through objects by index
for i in range(table_rows):
# make a row
<div class="row">
for j in range (i*6,(i+1)*6):
#make six or less columns
<div class="span2">
<p>set_as_list[j].attribute1</p>
<p>set_as_list[j].attribute2</p>
</div>
</div> # end row
I hope this flagrant mixing of django templating language, python, and html doesn't offend anybody too badly. just trying to express the idea of what I'm trying to do. I would appreciate any help someone may be willing to offer because I've been struggling with this for days and have done quite a bit of searching for a solution both within a template and outside.
我希望 django 模板语言、python 和 html 的这种公然混合不会太冒犯任何人。只是想表达我正在尝试做的事情的想法。如果有人愿意提供任何帮助，我将不胜感激，因为我已经为此苦苦挣扎了好几天，并且已经在模板内和外部搜索了很多解决方案。
I also realise that there will be need to be a final row with the remainder of objects after the integer division.
我也意识到在整数除法之后需要有一个包含剩余对象的最后一行。
回答by Mark
Have no time to explain, but I've had similar problem and until i closed this browser page here is a solution
没有时间解释，但我遇到了类似的问题，直到我关闭此浏览器页面这里是一个解决方案
{% for sub_article in articles %}
{% if forloop.first %}<div class="row">{% endif %}
<div class="col-xs-4">
<a href="#">
{{ sub_article.name }}
</a>
</div>
{% if forloop.counter|divisibleby:3 %}</div><div class="row">{% endif %}
{% if forloop.last %}</div>{% endif %}
{% endfor %}
回答by Sharpless512
Since forloop.counter starts the index with 1, divisibleby 3 does not work. So use forloop.counter0 instead.
由于 forloop.counter 以 1 开始索引，因此被 3 整除不起作用。所以改用 forloop.counter0 。
<div class="row">
{% for product in all_products %}
{% if forloop.counter0|divisibleby:3 %}
</div><br><div class="row">
{% endif %}
<div class="col-4"></div>
{% endfor %}
回答by Alireza Saremi
maybe too late but there is simple solutionas follow
也许为时已晚，但没有简单的解决办法如下
<div class="container">
<div class="row">
{% for product in products %}
{% if forloop.counter0|divisibleby:3 and not forloop.first %}<div class="w-100"></div>{% endif %}
<div class="col">{{product.title}}</div>
{% endfor %}
</div>
</div>
回答by Arpit
You could make the code a bit more generic. Here's the logic:
您可以使代码更通用一些。这是逻辑：
queryset = Class.objects.all()
set_length = queryset.count()
<div class="row">
{% for i in queryset %}
<div class="span2">
<p>i.attr</p>
<p>i.attr</p>
</div>
{% if forloop.counter|divisibleby:"6" or forloop.last %}
</div> <!--end row-->
{% endif %}
{% endfor %}
I hope this solves your problem :-)
我希望这能解决你的问题:-)
回答by Fomalhaut
I would recommend to add a custom tag as_chunk. I think it makes the code prettier and more readable.
我建议添加自定义标签as_chunk。我认为它使代码更漂亮，更具可读性。
# app/templatetags/my_tags.py
from math import ceil
from django import template
register = template.Library()
@register.filter
def as_chunks(lst, chunk_size):
limit = ceil(len(lst) / chunk_size)
for idx in range(limit):
yield lst[chunk_size * idx : chunk_size * (idx + 1)]
# app/templates/your-template.html
{% load my_tags %}
...
{% for chunk in elements|as_chunk:6 %}
<div class="row">
{% for element in chunk %}
<div class="col-2">
{{ element.name }}
</div>
{% endfor %}
</div>
{% endfor %}
...
