Как отобразить user_list в строке с отступом с сервера в Django?

Question

У меня проблема. У меня есть сайт, который отображает пользователей, но он отображает пользователей не по прямой линии, а в перевернутой пирамиде.Это может быть потому, что я использую приложение django-filter, но это не должно создавать проблему как таковую.Профили в самом конце (особенно в мобильном представлении) перекрываются и перетаскиваются.Это ухудшается, поскольку профили увеличиваются.Можно ли выровнять профили или список пользователей по прямой линии?

Пожалуйста, найдите ниже мой код.

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

Вы должны закрыть свои теги div в каждом цикле for, поскольку вы запускаете их в цикле.

Измените:

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

на:

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