Python 如何使用Django和Bootstrap跨网格显示动态内容？

我正在做一个Django项目，其主页类似于StackOverflow：它在一个主列中显示用户生成的内容片段。但是，我希望这些内容片段能够以3行的形式显示在主页上（想想[Pinterest pinboard page][2]或网格布局博客）

我使用的是Bootstrap的网格系统，但我意识到我不知道Python/Django模板magic+Bootstrap的正确组合，无法让传入内容在网格中填充。有人能给我解释一下吗

我想要

            {% for question in questions.paginator.page %}
            {% question_list_item question %}
            {% endfor %}

…具有重复的效果

<div class="container">
     <div class="row clearfix">
          <div class="col-md-4">
                item 1
          </div>
          <div class="col-md-4">
                item 2
          </div>
          <div class="col-md-4">
                item 3
          </div>
     </div>
     <div class="row clearfix">
          <div class="col-md-4">
                item 1
          </div>
          <div class="col-md-4">
                item 2
          </div>
          <div class="col-md-4">
                item 3
          </div>
     </div>
</div>

项目1
项目2
项目3
项目1
项目2
项目3

更新：我能够通过以下方法实现这一点（在响应性方面有一些列计数变化），但我是初学者，请告诉我是否有更好的解决方案

                    <div class="row">
                        {% for question in questions.paginator.page %}
                        <div class="col-lg-3 col-sm-6 col-xs-12">
                            {% question_list_item question %}
                        </div>
                        {% if forloop.counter|divisibleby:4 %}
                    </div>
                    <div class="row">
                        {% endif %}
                        {% endfor %}
                    </div>

{questions.paginator.page%中的问题为%s}
{%question\列表\项目问题%}
{%if-forloop.counter | divisibleby:4%}
{%endif%}
{%endfor%}

---

谢谢大家!

最简单的情况是，如果您有两个单独的用户贡献的信息，需要分为两列；然后，您可以执行以下操作：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      {{ usercontent.thing_a }}
    </div>
    <div class="col-sm-6">
      {{ usercontent.thing_b }}
    </div>
  </div>
</div>

{{usercontent.thing_a}
{{usercontent.thing_b}

如果用户在一个大的整体块中输入内容，你需要弄清楚你想要如何分割它——文本中是否有一些标记可以用来分割成两部分，然后像上面那样做？如果是这样，您可以使用Python的

split

或使用正则表达式来拆分它

---

或者，这篇经文就像一篇文章的正文，你想把它一分为二？如果是后一种情况，我会让文本显示在一个引导列中，但使用CSS3的“column”属性显示为两列。

作为替代方案，您可以使用JavaScript网格，在客户端呈现，如Shield UI。您甚至可以将其绑定到服务器端API，用于检索数据和执行其他操作，如编辑、删除、排序、分组等

---

可以查看完整的教程和源代码。

有关如何在基于类的列表视图（Django&Bootstrap）中使用分页的信息，请参阅本资源：

视图.py

from django.views import generic
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from questions.models import Question

class QuestionListView(generic.ListView):
    model = Question
    template_name = 'your_app_name/questions.html'  
    context_object_name = 'questions'  
    paginate_by = 10
    queryset = Question.objects.all()  

questions.html

<table class="table table-bordered">
<thead>
<tr>
  <th>Item</th>
  <th>Tag</th>
  <th>Date</th>
</tr>
</thead>
<tbody>
{% for question in questions %}
  <tr>
    <td>{{ question.item }}</td>
    <td>{{ question.tag }}</td>
    <td>{{ question.date }}</td>
  </tr>
{% endfor %}
</tbody>
</table>

{% if is_paginated %}
<ul class="pagination">
{% if page_obj.has_previous %}
  <li><a href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
{% else %}
  <li class="disabled"><span>&laquo;</span></li>
{% endif %}
{% for i in paginator.page_range %}
  {% if page_obj.number == i %}
    <li class="active"><span>{{ i }} <span class="sr-only">(current)</span>     </span></li>
  {% else %}
    <li><a href="?page={{ i }}">{{ i }}</a></li>
  {% endif %}
 {% endfor %}
 {% if page_obj.has_next %}
  <li><a href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
 {% else %}
  <li class="disabled"><span>&raquo;</span></li>
 {% endif %}
 </ul>
 {% endif %}

<div class="container">
  <div class="row">
  {% for question in questions.paginator.page %}
  {%  if forloop.counter|divisibleby:3 %} 
    <div class="col-md-4">
      {{ question.title }}
    </div>
  </div>
  {% if not forloop.last %} 
  <div class="row">
  {% endif %}
  {% else %} 
    <div class="col-md-4">
      {{ question.title }}
    </div>
  {% endif %}
  {% endfor %}
  </div>
</div>

项目
标签
日期
{问题%中的问题的百分比}
{{question.item}}
{{question.tag}
{{question.date}
{%endfor%}
{%if已分页%}

{%如果页面_obj.has_previous%}

{%else%}
«
{%endif%}
{paginator.page_range%}
{%如果页码=i%}
{{i}（当前）
{%else%}

{%endif%}
{%endfor%}
{%如果页面_obj.has_next%}

{%else%}
»
{%endif%}

{%endif%}

我也遇到了同样的问题，以下是我的解决方案：

html

<table class="table table-bordered">
<thead>
<tr>
  <th>Item</th>
  <th>Tag</th>
  <th>Date</th>
</tr>
</thead>
<tbody>
{% for question in questions %}
  <tr>
    <td>{{ question.item }}</td>
    <td>{{ question.tag }}</td>
    <td>{{ question.date }}</td>
  </tr>
{% endfor %}
</tbody>
</table>

{% if is_paginated %}
<ul class="pagination">
{% if page_obj.has_previous %}
  <li><a href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
{% else %}
  <li class="disabled"><span>&laquo;</span></li>
{% endif %}
{% for i in paginator.page_range %}
  {% if page_obj.number == i %}
    <li class="active"><span>{{ i }} <span class="sr-only">(current)</span>     </span></li>
  {% else %}
    <li><a href="?page={{ i }}">{{ i }}</a></li>
  {% endif %}
 {% endfor %}
 {% if page_obj.has_next %}
  <li><a href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
 {% else %}
  <li class="disabled"><span>&raquo;</span></li>
 {% endif %}
 </ul>
 {% endif %}

<div class="container">
  <div class="row">
  {% for question in questions.paginator.page %}
  {%  if forloop.counter|divisibleby:3 %} 
    <div class="col-md-4">
      {{ question.title }}
    </div>
  </div>
  {% if not forloop.last %} 
  <div class="row">
  {% endif %}
  {% else %} 
    <div class="col-md-4">
      {{ question.title }}
    </div>
  {% endif %}
  {% endfor %}
  </div>
</div>

{questions.paginator.page%中的问题为%s}
{%if-forloop.counter | divisibleby:3%}
{{question.title}
{%if不是forloop.last%}
{%endif%}
{%else%}
{{question.title}
{%endif%}
{%endfor%}

可以发布您的

型号的代码。py

？您也可以将所有问题粘贴在一行中。浮点数将换行，只是因为在一个容器中最多只能容纳12列。这里建议使用相同的内容（forloop.counter | divisibleby）：啊，我认为在我的意思是“行”时使用短语“多列”是不必要的混淆。很抱歉。实际上，我并不想在每一列中添加不同的信息，而是在一个网格中填充相同的信息（想象一下，如果Twitter在Pinterest板上的所有框中显示推文，而不是在单个列的时间线中显示推文）。我想我想要的解决方案似乎涉及{%cycle…或{%if forloop…但我自己无法解决。如果有帮助，我在问题中添加了更多信息。非常感谢！