{% for plant in plants %}
{% if forloop.counter0|divisibleby:3 %}
<div class="row row-cols-3">
{% endif %}
{% include 'included/_plant_cell.html' %}
{% if forloop.counter|divisibleby:3 %}
</div>
{% endif %}
{% endfor %}
_plant_cell.html:
<div class="plant-cell card col-md-4 m-1">
<div class="card-body">
<div class="card-text">
{{ plant.name }}
</div>
</div>
</div>
下面的代码导致只包含两张卡片的行,第三张卡片向下滑动到下一行(当边缘m-1被移除时,然后OK),因此一般视图重复:两张牌一张牌
希望看到每行有三张牌。
1条答案
按热度按时间mbyulnm01#
_plant_cell.html:
我把margin改为padding p-1,然后把卡片plant-cell从column分隔成subsidiary div,这工作得很好,和预期的一样,也更规范化了。