循环的Django Html页面呈现项

我有一个页面，我正在运行一个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 %}

{%extends'base.html%}
{%load crispy_forms_tags%}
{%crispy K8Points\u ClassroomForm%}
{%load static%}
{%block content%}


{%load static%}
我的教室




{%csrf_令牌%}
以用户身份记录数据：{{User.username}

今天的日期：{Date}

教室：{{classname}

我的学生

{i在学生中占%}
{%if-forloop.counter0<4%}
{{i.student_name}
今天的分数：
升级
积分确认
&时代；
请为当前学生添加所选分数。
{{form.student|u name|as_crispy_field}
{{form.time|u frame|as_crispy_field}}
{{form.behavior}as_crispy_field}
{{form.academic}as|u crispy_field}
升级
{%endif%}
{%endfor%}
{%endblock%}

---

我认为如果固定大小为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 %}

---

如果数据数量未知，您可以改为签出。

如果您的固定大小为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 %}

如果数据数量未知，您可以改为签出。

#您必须将行div（）置于for循环之外，这样，将只有一行三列。
{%extends'base.html%}
{%load crispy_forms_tags%}
{%crispy K8Points\u ClassroomForm%}
{%load static%}
{%block content%}


{%load static%}
我的教室




{%csrf_令牌%}
以用户身份记录数据：{{User.username}

今天的日期：{Date}

教室：{{classname}

我的学生

{i在学生中占%}
{%if-forloop.counter0<4%}
{{i.student_name}
今天的分数：
升级
积分确认
&时代；
请为当前项目添加选定的点
学生。
{{form.student|u name|as_crispy_field}
{{form.time|u frame|as_crispy_field}}
{{form.behavior}as_crispy_field}
{{form.academic}as|u crispy_field}
升级
{%elif forloop.counter0<8%}
{%elif forloop.counter0<12%}
{%endif%}
{%endfor%}
{%endblock%}

#您必须将行div（）置于for循环之外，这样，就只有一行三列了。
{%extends'base.h