我的问题
我正在制作一个购物中心使用Django, Bootstrap
我想实现技术换行当帖子变成4
我想如果我使用col3和{$ for %} {% endfor %}，它将被分为四个和换行符。但不工作
我该如何修复它?
<我的模型/strong>
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
<我的观点/strong>
from django.shortcuts import render
from .models import Cloth
def index(request):
post = Cloth.objects.all()
return render(request, 'Blog/index.html', {'post':post})
<我的url/strong>
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。
可以使用可除性和forloop。计数器来测试记录号是否为4的倍数，如果是，则关闭行div并在模板中打开另一个。有关这些模板工具的更多详细信息，请参阅文档。
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>