Html Django/Bootstrap-如何限制每行的块数？

我有一个页面，每个项目都有一张引导卡，比如

{%for item%}创建一张包含某些内容的卡片

我如何限制每行创建的卡的数量，直到它跳到它下面的一行

 <div class = 'card-group'>
{% for plant in plant%}
{% if plant.available%}
<div class="card text-white bg-dark mb-3" style=''>
  <img style='height: auto; max-width: 100%;' src="{{plant.thumbnail}}" alt="...">
  <div class="container">
    <h4 style='color:white;' class="card-title"><b>{{plant.name |title}}</b></h4>
    <p style='font-size: 20px'>Soil: {{plant.soil |title}}</p>
    <p style='font-size: 20px'>Price per unit: £{{plant.price |title}}</p>
  </div>
  <div class='button-section'>
  <button class="order-button"><a href=''>Order Online</a></button>
  </div>
</div>

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

---

我想每行只显示4个对象，然后跳到下一行，依此类推……

引导行每行有12列。如果将div设置为col-4，则for循环将每行打印3列。4x3=12。如果您使用col-2，那么每行将获得6个较小的div。6x2=12

您可以使用

forloop.counter

和模板标记

divisibleby

。那么代码可以是这样的：

{items%]中的项的%
{%if-forloop.counter0 |可除数为：“4”%}
{%endif%}
{%if-forloop.counter0 |可除数为：“4”%}
{%endif%}
{%endfor%}

也可以在视图中实现该逻辑。Can看起来像这样：

行=[]
items=[1,2,3,4,5,6,7,8,9]#Item.objects.all（）等。
每行=4
i=0
尽管如此：
行项目=项目[i*每行：（i+1）*每行]
如果不是行项目：
打破
行。追加（行\项）
i+=1
打印（行）

当您运行该示例时，输出是

[[1,2,3,4]，[5,6,7,8]，[9]

，因此您有嵌套的列表，因此您必须在模板中为两个for循环添加数据。

这为我做到了

<div class="row row-cols-1 row-cols-md-4 g-4">

请显示模板代码，详细说明生成的html元素以及应用于这些元素的样式。由于div元素的数量是动态的，因此使用bootstrap的网格将非常棘手。CSS网格可能更适合。这个答案太突然了。任何不太了解bootstrap的人都不会知道你在说什么。提供一些上下文/解释，添加一个示例，以便您的答案更容易理解。这样，你的答案更有可能被接受并获得更多选票。

<div class="row row-cols-1 row-cols-md-4 g-4">