4 продукта на одной строке в шаблоне
Я разрабатываю электронную коммерцию с помощью Django. Мой бэкенд в порядке, моя проблема заключается в шаблоне. В настоящее время я хочу отображать 4 товара в строке, и если есть 7 товаров, то остальные 3 должны быть выровнены с верхним. Я использую bootstrap для этого, однако, по какой-то неизвестной мне причине, у него нет 4 продуктов на одной строке, даже с пробелом. Я использую контейнер с 1200px.
home.html
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
{% for product in products %}
<div class="card mb-4 border rounded" style="width: 13.5rem;">
<a href="{{ product.get_absolute_url }}">
{%if product.image %}
<img class="img-produto" src='/media/{{product.image}}' class="card-img-top hover_img ">
{% else%}
<img class="img-produto" src="{% static '/img/not-found-product.jpg' %}" class="card-img-top hover_img">
{%endif%}
</a>
<div class="card-body">
<p class="card-title">{{product.name}}</p>
<p class="card-text"><i class='fas fa-dollar-sign' style="margin-right:2px"></i>{{product.price}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
Просто удалите width: 13.5rem;
и добавьте класс col-4
в div. Например,
<div class="col-4 card mb-4 border rounded"
</div>