如何在Django中以缩进行显示来自服务器的用户列表？

Question

我有一个问题，我有一个网站，显示用户，但它显示用户不是在一条直线，而是在一个倒金字塔。这可能是因为我使用的是django filter应用程序，但它本身不应该产生问题。右端的轮廓（尤其是在移动视图中）重叠并拖动。随着配置文件的增加，情况变得更糟。是否可以将配置文件或用户列表对齐

请在我的代码下面找到

py（适用于djang filters应用程序）

  import django_filters
  from userprofile.models import UserProfiles

class UserProfilesFilter(django_filters.FilterSet):
    class Meta:
       model = UserProfiles
       fields = ['gender', 'age', 'Nationality','preference', 'Country', 
       'City']

views.py

@login_required
def profiles_list(request):
    filter = UserProfilesFilter(request.GET, queryset = 
    UserProfiles.objects.all().order_by('-pub_date'))
    return render(request,"userprofile/user_list.html", {'filter': filter})

user_list.html

  {% extends 'base.html' %}
   {% block content %}
   {% load static %}
   {% load bootstrap %}




<div class="container">

<form class="form-horizontal col-md-4 col-lg-4 col-sm-4" action="" 
 method="get">
      {{ filter.form|bootstrap}} {% csrf_token %}
      <input type="submit" value='search'/>
   </form>

 {% for profile in filter.qs %}

 <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">


  <hr>

  <a href="{% url 'userprofile:profileview' profile.user %}"><h3>{{ 
  profile.user }}</h3></a>
  <br>
 <img src="{{ profile.image.url }}" class="rounded mx-auto d-block img- 
responsive float-left" style= "max-height: 100px; max-width: 100px;">
 <br><br>
 <br><br> <br>
 <div class="font-weight-normal text-justify">
 Gender: {{ profile.gender }}
 <br>
 Country: {{ profile.Country }}
 <br>
 Description: {{ profile.summary }}
 <br>
 Preferences: {{ profile.preference }}
 <br><br>

  {% endfor %}
   </div>
   </div>
   <!--adnow ad-->
   <script type="text/javascript">
  (sc_adv_out = window.sc_adv_out || []).push({
    id : "575193",
   domain : "n.ads1-adnow.com"
   });
   </script>
  <script type="text/javascript" src="//st-n.ads1-adnow.com/js/a.js"> 
</script>
<div id="SC_TBlock_575193" class="SC_TBlock">loading...</div>
<!--adnow finishes-->





 {% endblock %}

Answer 1

您应该关闭每个for循环中的div标记，因为它们是在循环中启动的

更改：

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

致：

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