如何使用Django与Bootstrap在网格上进行动态内容显示？ [英] How to make dynamic content display across a grid using Django with Bootstrap?

问题描述

我正在使用类似于StackOverflow的主页进行Django项目：它在单个主列中显示传入的用户生成内容的片段。不过，我希望这些内容片段可以显示在填写主页的3行中（想想[Pinterest pinboard page] [2]或网格布局博客）。

I'm working on a Django project with a homepage similar to StackOverflow's: it displays snippets of incoming user-generated content in a single main column. However, I'd like those content snippets to display across rows of 3 filling up the homepage (think [Pinterest pinboard page][2] or a grid layout blog).

我使用Bootstrap的网格系统，但意识到我不知道Python / Django模板magic + Bootstrap的正确组合，以便将传入的内容填充到网格中。有人可以为我拼写出来吗？

I'm using Bootstrap's grid system, but realized I don't know the right combination of Python/Django template magic + Bootstrap to get that incoming content to populate across a grid. Can someone spell this out for me?

我想要...

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

更新：我能够得到这个工作（有一点列 - 响应性的变化）使用以下，但我是一个初学者，所以请让我知道如果有一个更好的解决方案。

Update: I was able to get this working (with a little column-count variation for responsiveness) using the following, but I'm a beginner so please let me know if there's a better solution.

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

谢谢！

推荐答案

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

See this resource on how to use Pagination with Class-Based List Views (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 %}

这篇关于如何使用Django与Bootstrap在网格上进行动态内容显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！