Реализация в технологии Django переноса строк по количеству постов

Моя проблема

Я делаю торговый центр, используя Django, Bootstrap

Я хочу реализовать технологию перевода строки, когда пост становится 4

Я думал, что если я использую col-3 и {$ for %} {% endfor %}, то он будет разделен на четыре части и разрывы строк. но не работает

Как я могу это исправить?

MY модели

from django.db import models

class Cloth(models.Model):
    title = models.CharField(max_length=30)
    explain = models.CharField(max_length=30)
    price = models.IntegerField(blank=True)

    def __str__(self):
        return self.title

Мои взгляды

from django.shortcuts import render
from .models import Cloth

def index(request):
    post = Cloth.objects.all()
    return render(request, 'Blog/index.html', {'post':post})

Мои урлы

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),

]

Мой index.html

<div class="container py-3">
    <h2 align="center"> Top </h2>
</div>
<div class="container py-2 px-1">
    <div class="row">
        {% for p in post %}
        <div class="card col-3" style="width: 16rem;">
            <img src="http://placeimg.com/600/600/any" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title"> {{ p.title }}</h5>
                <p class="card-text"> {{ p.explain }}</p>
                <p> {{ p.price }}</p>
            </div>
        </div>
        {% endfor %}
    </div>

Проблема в том, что вы помещаете все в один ряд div.

Вы можете использовать div div div и forloop.counter, чтобы проверить, является ли номер записи кратным четырем, и, если да, закрыть ваш row div и открыть другой в вашем шаблоне. Дополнительные сведения об этих инструментах шаблона см. в docs.

Index.html

<div class="container py-2 px-1">
    <div class="row">
        {% for p in post %}
        <div class="card col-3" style="width: 16rem;">
            <img src="http://placeimg.com/600/600/any" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title"> {{ p.title }}</h5>
                <p class="card-text"> {{ p.explain }}</p>
                <p> {{ p.price }}</p>
            </div>
        </div>


        {% if forloop.counter|divisibleby:"4" %}
    <!-- here we close the row and then reopen another -->
    </div>
    <div class="row">
        {% endif %}

        {% endfor %}
    </div>
</div>
Вернуться на верх