如何在Django中使用Bootstrap实现动态内容在网格中显示？

Question

我正在做一个Django项目，主页的样子有点像StackOverflow：它在一个主要的列中显示用户生成的内容片段。不过，我希望这些内容片段能以每行3个的方式展示，填满整个主页（想象一下像[Pinterest的拼贴板页面][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

查看这个资源，了解如何在使用类视图的列表中实现分页（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 %}

Answer 2

作为一种替代方案，你可以使用一个在客户端渲染的JavaScript网格，比如Shield UI的网格小部件。你甚至可以把它和服务器端的API连接起来，这样就可以获取数据，还能进行编辑、删除、排序、分组等操作。

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

Answer 3

最简单的情况是，如果你有两段用户提供的信息需要放在两列里，你可以这样做：

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

我也遇到过同样的问题，这里是我的解决办法：

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>