Django - Итерация над списком в шаблоне
В настоящее время я пытаюсь выполнить итерацию по списку, используя шаблонизацию Django. Я пытаюсь добиться того, чтобы иметь несколько строк с тремя колонками. Текущая логика создает один ряд примерно с каждым третьим элементом карты.
Какой подход будет лучшим для создания каждой строки с тремя колонками?
{% extends "stockwatcher/base.html" %}
{% block content %}
<div class="container">
{% for stock in stocks %}
{% if forloop.counter0 == 0 or forloop.counter0|divisibleby:3 %}
<div class="row">
{% endif %}
<div class="col-sm">
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">{{stock.transaction_date}}</div>
<div class="card-body">
<h5 class="card-title">{{ stock.id }} {{stock.ticker}} </h5>
<p class="card-text">{{stock.senator}} - {{stock.type}}</p>
</div>
</div>
</div>
{% if forloop.counter0 == 0 or forloop.counter0|divisibleby:3 %}
</div>
{% endif %}
{% endfor %}
</div>
{% endblock content %}
Вы должны использовать row div вне цикла for, а классы bootstrap сделают все остальное за вас. Вы также можете использовать тег {% empty %}
для обработки пустого списка.
{% extends "stockwatcher/base.html" %}
{% block content %}
<div class="container">
<div class="row">
{% for stock in stocks %}
<div class="col-sm">
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">{{stock.transaction_date}}</div>
<div class="card-body">
<h5 class="card-title">{{ stock.id }} {{stock.ticker}} </h5>
<p class="card-text">{{stock.senator}} - {{stock.type}}</p>
</div>
</div>
</div>
{% empty %}
No items
{% endfor %}
</div>
</div>
{% endblock content %}