Невозможно просмотреть несколько миниатюр подряд

Question

Я хочу получить миниатюры подряд. Это получение одного столбца Я использовал фондовый HTML-шаблон Шаблон работает сам по себе Я исправил класс строки, но он не подходит как требуется

Мой результат

     {% extends "base.html" %}
     {% load static %}

     {{% block content %}
          <!-- ##### Listing Content Wrapper Area Start ##### -->
          <section class="listings-content-wrapper section-padding-100">
          <div class="container">
          <div class="row">
          <div class="col-12">
          <div class="listings-top-meta d-flex justify-content-between mb-100">
              <div class="view-area d-flex align-items-center">
                  <span>View as:</span>
                  <div class="grid_view ml-15"><a href="#" class="active"><i class="fa fa-th" aria-hidden="true"></i></a></div>
                  <div class="list_view ml-15"><a href="#"><i class="fa fa-th-list" aria-hidden="true"></i></a></div>
              </div>
              <div class="order-by-area d-flex align-items-center">
                  <span class="mr-15">Order by:</span>
                  <select>
                    <option selected>Default</option>
                    <option value="1">Newest</option>
                    <option value="2">Sales</option>
                    <option value="3">Ratings</option>
                    <option value="3">Popularity</option>
                  </select>
              </div>
          </div>
          </div>
          </div>

          {% if listings %}
          {% for listing in listings %}

          <div class="row">
          <!-- Single Featured Property -->

            <div class="col-x-6 col-md-4">
              <div class="single-featured-property mb-50">
              <!-- Property Thumbnail -->
              <div class="property-thumb">
                  <img src="{{listing.photo_main.url}}" alt="">
                  <div class="tag">
                    <span>For Sale</span>
                  </div>
                  <div class="list-price">
                      <p>₹{{listing.price}}</p>
                  </div>
              </div>
              <!-- Property Content -->
              <div class="property-content">
                  <h5>{{listing.title}}</h5>
                  <p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
                  <p>{{listing.description}}</p>
                  <div class="property-meta-data d-flex align-items-end justify-content-between">
                      <div class="new-tag">
                          <img src="{% static 'img/icons/new.png'%}" alt="">
                      </div>
                      <div class="bathroom">
                          <img src="{% static 'img/icons/bathtub.png'%}" alt="">
                          <span>{{listing.bathrooms}}</span>
                      </div>
                      <div class="garage">
                          <img src="{% static 'img/icons/garage.png'%}" alt="">
                          <span>{{listing.garage}}</span>
                      </div>
                      <div class="space">
                          <img src="{% static 'img/icons/space.png'%}" alt="">
                          <span>{{listing.sqft}} sq ft</span>
                      </div>
                  </div>
              </div>
          </div>
          </div>
          </div>
          {% endfor %}

          {% endif %}

          <div class="row">
          <div class="col-12">
          <div class="south-pagination d-flex justify-content-end">
              <nav aria-label="Page navigation">
                  <ul class="pagination">
                      <li class="page-item"><a class="page-link active" href="#">01</a></li>
                      <li class="page-item"><a class="page-link" href="#">02</a></li>
                      <li class="page-item"><a class="page-link" href="#">03</a></li>
                  </ul>
              </nav>
          </div>
          </div>
          </div>
          </div>
          </section>
          <!-- ##### Listing Content Wrapper Area End ##### -->
{% endblock %}}

Я хочу получить 3 миниатюры подряд Файл CSS используется из стандартного файла шаблона. Списки недвижимости должны отображаться как в базе данных.

Мне нравится

Answer 1

Вы генерируете row для каждого списка. В идеале вы хотели бы только списки. Так что вы можете сделать:

      {% if listings %}
      {% for listing in listings %}

      {% if forloop.counter0|divisibleby:3 %}<div class="row">{% endif %}

      <!-- Single Featured Property -->

        <div class="col-x-6 col-md-4">
          <div class="single-featured-property mb-50">
          <!-- Property Thumbnail -->
          <div class="property-thumb">
              <img src="{{listing.photo_main.url}}" alt="">
              <div class="tag">
                <span>For Sale</span>
              </div>
              <div class="list-price">
                  <p>₹{{listing.price}}</p>
              </div>
          </div>
          <!-- Property Content -->
          <div class="property-content">
              <h5>{{listing.title}}</h5>
              <p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
              <p>{{listing.description}}</p>
              <div class="property-meta-data d-flex align-items-end justify-content-between">
                  <div class="new-tag">
                      <img src="{% static 'img/icons/new.png'%}" alt="">
                  </div>
                  <div class="bathroom">
                      <img src="{% static 'img/icons/bathtub.png'%}" alt="">
                      <span>{{listing.bathrooms}}</span>
                  </div>
                  <div class="garage">
                      <img src="{% static 'img/icons/garage.png'%}" alt="">
                      <span>{{listing.garage}}</span>
                  </div>
                  <div class="space">
                      <img src="{% static 'img/icons/space.png'%}" alt="">
                      <span>{{listing.sqft}} sq ft</span>
                  </div>
              </div>
          </div>
      </div>
      </div>
      {% endfor %}
      </div>

      {% endif %}

Или, если вы хотите сгенерировать строку для каждых трех перечислений, которые вы делаете:

      {% if listings %}
      <div class="row">
      {% for listing in listings %}

      <!-- Single Featured Property -->

        <div class="col-x-6 col-md-4">
          <div class="single-featured-property mb-50">
          <!-- Property Thumbnail -->
          <div class="property-thumb">
              <img src="{{listing.photo_main.url}}" alt="">
              <div class="tag">
                <span>For Sale</span>
              </div>
              <div class="list-price">
                  <p>₹{{listing.price}}</p>
              </div>
          </div>
          <!-- Property Content -->
          <div class="property-content">
              <h5>{{listing.title}}</h5>
              <p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
              <p>{{listing.description}}</p>
              <div class="property-meta-data d-flex align-items-end justify-content-between">
                  <div class="new-tag">
                      <img src="{% static 'img/icons/new.png'%}" alt="">
                  </div>
                  <div class="bathroom">
                      <img src="{% static 'img/icons/bathtub.png'%}" alt="">
                      <span>{{listing.bathrooms}}</span>
                  </div>
                  <div class="garage">
                      <img src="{% static 'img/icons/garage.png'%}" alt="">
                      <span>{{listing.garage}}</span>
                  </div>
                  <div class="space">
                      <img src="{% static 'img/icons/space.png'%}" alt="">
                      <span>{{listing.sqft}} sq ft</span>
                  </div>
              </div>
          </div>
      </div>
      </div>
      {% if forloop.counter0|divisibleby:3 %}</div>{% endif %}
      {% endfor %}

      {% endif %}