У меня есть следующий код в шаблонах Django:
<section>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="features_items"><!--products --- features_items-->
<h2 class="title text-center">Recommended for you</h2>
{% for p in post|slice:":12" %}
<div class="col-sm-4" , id="items">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center shadow p-3 mb-5 bg-white rounded" style="
border-style: solid;
border-width:0.1px;
color: #E0E0E0;">
<a href="{{ p.product_url }}"><img src="{{ p.product_image }}" alt=""/></a>
<h6 style="color: #666663"> {{ p.product_price }} ৳ </h6>
<a href="{{ p.product_url }}"><p>{{ p.product_name|truncatewords:5 }}</p>
</a>
<a href="#" style="color: #06c1bc;"><span
class="glyphicon glyphicon-heart-empty"></span> Like</a>
<a href="{{ p.product_url }}"
style="color: #06c1bc; padding-left: 10px"><span
class="glyphicon glyphicon-eye-open"></span> Detail</a>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
{# <li><a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-heart"></span> Like</a></li>#}
{# <li><a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-thumbs-down"></span> Unlike</a></li>#}
</ul>
</div>
</div>
</div>
{% endfor %}
</div><!--Recommended Products-->
</div>
</div>
</div>
</section>
, который дает мне следующий вывод https://drive.google.com/file/d/1PmKCKKIm7QcyamICYG3J9iG0eBm_8DEi/view?usp=sharing
Но я хочу отобразить эти элементы в одной строке, значит, в каждой строке будет отображаться 3 элемента. Какие изменения я должен внести в мой код?