如何使用带有 Bootstrap 的 Django 在网格中显示动态内容？

Question

我正在开发一个 Django 项目，其主页类似于 StackOverflow 的主页：它在单个主列中显示传入用户生成内容的 sn-ps。但是，我希望这些内容 sn-ps 显示在填满主页的 3 行中（想想 [Pinterest pinboard page][2] 或网格布局博客）。

我正在使用 Bootstrap 的网格系统，但我意识到我不知道 Python/Django 模板魔术 + 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>

更新：我能够使用以下方法来完成这项工作（响应速度的列数有一点变化），但我是初学者，所以如果有更好的解决方案，请告诉我.

                    <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>

谢谢！

Answer 1

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

html

<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>

Answer 2

最简单的情况是，如果您有两个单独的用户提供的信息需要放在两列中；那么您可以执行以下操作：

<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>

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

或者这个连续文本，就像一篇文章的正文，你希望它分成两半？如果是后一种情况，我会将文本显示在一个 Bootstrap 列中，但使用 CSS3 的“column”属性显示为两列。

Answer 3

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

完整的教程和源代码可见here。

Answer 4

请参阅此资源，了解如何将分页与基于类的列表视图（Django 和 Bootstrap）一起使用： https://simpleisbetterthancomplex.com/tutorial/2016/08/03/how-to-paginate-with-django.html

views.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 %}