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

Question

我正在使用一个类似于StackOverflow的主页来处理Django项目：它在单个主列中显示传入用户生成内容的片段。不过，我希望这些内容片段能够在填满主页的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

最简单的情况是，如果您有两个单独的用户提供的信息需要分成两列;那么你可以这样做：

<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的“列”属性显示为两列。

Answer 2

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

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

Answer 3

参见如何使用分页与基于类的列表视图（Django的&引导）该资源： 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 %}