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>

enter image description here

Просто удалите width: 13.5rem; и добавьте класс col-4 в div. Например,

<div class="col-4 card mb-4 border rounded"
  
</div>
Вернуться на верх