Wie kann man dynamische Inhalte über ein Grid mit Django mit Bootstrap anzeigen lassen?

Question

Ich arbeite an einem Django-Projekt mit einer Homepage, die StackOverflow ähnlich ist: Es zeigt Snippets von ankommendem nutzergeneriertem Inhalt in einer einzigen Hauptspalte. Ich würde mir aber wünschen, dass diese Inhaltsauszüge in 3er-Zeilen angezeigt werden, die die Startseite ausfüllen (siehe [Pinterest-Pinnwand-Seite] [2] oder ein Gitter-Layout-Blog).

Ich benutze Bootstrap Grid-System, aber erkannte, dass ich nicht die richtige Kombination von Python/Django Vorlage Magie + Bootstrap, um diesen eingehenden Inhalt über ein Gitter zu füllen wissen. Kann jemand das für mich buchstabieren?

Ich möchte ...

  {% for question in questions.paginator.page %} 
      {% question_list_item question %} 
      {% endfor %} 

... die sich wiederholende Wirkung von

<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 haben: ich in der Lage war, diese Funktion zu erhalten (mit einem kleinen column-count Variation für die Reaktionsfähigkeit) mit den folgenden, aber ich bin ein Anfänger, so lassen Sie mich bitte wissen, wenn es eine bessere Lösung gibt.

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

Vielen Dank!

Answer 1

Der einfachste Fall ist, wenn Sie zwei separate Benutzer-Beitragsinformationen haben, die in zwei Spalten gehen müssen; dann können Sie so etwas wie tun:

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

Wenn der Benutzer Sachen in einem großen monolithischen Block eintritt, müssen Sie herausfinden, wie yo es teilen möchten - gibt es in dem Text einige Marker können Sie Verwenden Sie, um in zwei Teile zu teilen, und tun Sie es dann wie oben? Wenn ja, könnten Sie es mit Pythons split teilen oder eine Regex verwenden.

Oder ist dieser laufende Text, wie der Körper eines Artikels, und Sie wollen es in zwei Hälften teilen? Wenn es der letztere Fall ist, würde ich den Text in einer Bootstrap-Spalte anzeigen lassen, aber die "column" -Eigenschaft von CSS3 verwenden, um sie als zwei Spalten anzuzeigen.

Answer 2

Als Alternative können Sie ein JavaScript-Grid verwenden, das auf der Client-Seite gerendert wird, wie die Shield UI Grid widget. Sie können es sogar an eine serverseitige API binden, um die Daten abzurufen und andere Operationen wie Bearbeiten, Löschen, Sortieren, Gruppieren usw. auszuführen.

Ein vollständiges Tutorial und Quellcode dafür können Sie sehen here.

Answer 3

Sehen Sie diese Ressource, wie Paginierung verwenden, um mit Klassenbasierte Listenansichten (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 %}