如何使用帶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 %}