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>

更新：我能够使用以下内容实现此功能（使用一点列计数变化来实现响应），但我是初学者，所以请告诉我是否有＆＃39 ;更好的解决方案。

                    <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＆＃34;列＆＃34;属性显示为两列。

Answer 2

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

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

Answer 3

请参阅此资源，了解如何使用基于类的列表视图的分页（Django＆amp; 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 4

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

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>

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

4 个答案: