Django HTML页面渲染项循环

Question

我有一个页面正在运行for循环，问题是我只希望每列显示4个学生，然后与其他4个学生一起开始下一列。但是，我正在努力使其工作。我最初正确地完成了所有这些设置，但是第二个我添加了for循环，它弄乱了列的所有位置。我在第一列中发布的代码只有4个学生，我需要另外2列来显示全部12个。非常感谢您的帮助。谢谢

 {% extends 'base.html' %}
{% load crispy_forms_tags %}
{% crispy K8Points_ClassroomForm %}
{% load static %}
{% block content %}


<br>
<h2>{% load static %}
<img src="{% static 'forms/star.png' %}" alt="chain" height="62" width= "62"> My Classroom</h2>
<br>
<br>


<form action = "/points/k8_points_classroom" method="POST">
    {% csrf_token %}
 <!-- Start Date -->
<div class = "container">
<div class = "container">
 <div class= 'row'>
  <div class="col-4"> 
<p> Recording Data as User : {{user.username}} </p>
<p> Today's Date : {{date}} </p>
<p> <b> Classroom : {{classname}} </b> </p>
  </div>

</div>
    <div class="jumbotron" align ="middle">
        <h1>My Students</h1> 
            <!-- Line Break --> 
            <hr style="border: 1px solid black;" />
            <!-- Line Break --> 
            {% for i in students %}

              {% if forloop.counter0  < 4 %}



               <div class="row mb-3">

                 <div class="col-md-4 themed-grid-col"><h2>{{i.student_name}}</h2> <p align ="left"> Today's Score: </p><h4><button type="button" class="btn btn-primary btn-lg btn-block" data-toggle ="modal" data-target ="#PointsBox1" >Level Up</button></h4>

                <div id="PointsBox1" class = "modal fade" role ="dialog">
                    <div class= "modal-dialog">
                        <div class="modal-content">
                            <div class ="modal-header"> 
                                 <img src="{% static 'forms/star.png' %}" align ="left" alt="chain" height="42" width= "42">
                                 <h4 class ="modal-title">Points Confirmation </h4> 
                                 <button type ="button" class= "close" data-dismiss="modal"> &times; </button>

                             </div>
                            <div class="modal-body"> 
                                    <h6> <div class="modal-body">Please add the selected points for the current student. </h6>  
                                          <div class = "form-row" align ='left'>
                                           <div class = "col-7">

                                             {{form.student_name|as_crispy_field }}
                                             {{form.time_frame|as_crispy_field }} 
                                           </div>  
                                         </div>
                                            <div class = "form-row">
                                                <div class = "col-3" align ='left'>
                                                  {{form.behavior|as_crispy_field }}
                                                  {{form.academic|as_crispy_field }} 
                                                  <button type="submit" class="btn btn-success"><i class="fas fa-star"></i> Level Up </button>
                                                </div>
                                             </div>

                            </div>

                            <div class="modal-foot"></div>

                        </div>

                  </div>


                </div>

            </div>                                               
       </div>
 <div>
    {% endif %}
     {% endfor %}  

</form>


{% endblock %}

Answer 1

我认为如果固定大小为12，则可以使用切片模板标签：

{% for student in students|slice:":4" %}
  some rendering..
{% endfor %}

{% for student in students|slice:"4:8" %}
  some rendering..
{% endfor %}

{% for student in students|slice:"8:12" %}
  some rendering..
{% endfor %}

如果数据数量未知，您可以改为检出this answer。

Answer 2

# You have to take your row div (<div class="row mb-3"></div>) outside of your for loop, So that, there will be only one row and three columns.


{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% crispy K8Points_ClassroomForm %}
{% load static %}
{% block content %}


<br>
<h2>{% load static %}
    <img src="{% static 'forms/star.png' %}" alt="chain" height="62" width="62"> My Classroom</h2>
<br>
<br>


<form action="/points/k8_points_classroom" method="POST">
    {% csrf_token %}
    <!-- Start Date -->
    <div class="container">
        <div class="container">
            <div class='row'>
                <div class="col-4">
                    <p> Recording Data as User : {{user.username}} </p>
                    <p> Today's Date : {{date}} </p>
                    <p><b> Classroom : {{classname}} </b></p>
                </div>
            </div>
            <div class="jumbotron" align="middle">
                <h1>My Students</h1>
                <!-- Line Break -->
                <hr style="border: 1px solid black;"/>
                <!-- Line Break -->

                <div class="row mb-3">
                {% for i in students %}
                    {% if forloop.counter0 < 4 %}
                        <div class="col-md-4 themed-grid-col"><h2>{{i.student_name}}</h2>
                            <p align="left"> Today's Score: </p>
                            <h4>
                                <button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal"
                                        data-target="#PointsBox1">Level Up
                                </button>
                            </h4>
                            <div id="PointsBox1" class="modal fade" role="dialog">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <img src="{% static 'forms/star.png' %}" align="left" alt="chain" height="42"
                                                 width="42">
                                            <h4 class="modal-title">Points Confirmation </h4>
                                            <button type="button" class="close" data-dismiss="modal"> &times;</button>
                                        </div>
                                        <div class="modal-body">
                                            <h6>
                                                <div class="modal-body">Please add the selected points for the current
                                                    student.</div>
                                            </h6>
                                            <div class="form-row" align='left'>
                                                <div class="col-7">

                                                    {{form.student_name|as_crispy_field }}
                                                    {{form.time_frame|as_crispy_field }}
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="col-3" align='left'>
                                                    {{form.behavior|as_crispy_field }}
                                                    {{form.academic|as_crispy_field }}
                                                    <button type="submit" class="btn btn-success"><i
                                                            class="fas fa-star"></i> Level Up
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-foot"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% elif forloop.counter0 < 8 %}
                        <!-- next column - same like above section -->
                    {% elif forloop.counter0 < 12 %}
                        <!-- next column - same like above section -->
                    {% endif %}
                {% endfor %}
                </div>

            </div>
        </div>
    </div>
</form>


{% endblock %}