Как получить элементы, сложенные в строке, вместе в столбце, который называется col-3

Я пытаюсь сложить все элементы друг под другом, если их больше одного. Я использую Django, и в настоящее время он воспроизводит новый col-3 для каждого нового элемента. Я пробовал bootstrap d-flex flex-wrap, однако это не работает.

<div class="col-12 col-lg-6">
            <p>Order History</p>
            {% for order in orders %}
            <div class="row">
                <div class="col-3">
                    <p>Date:</p>
                </div>
                <div class="col-3">
                    <p>Grand Total:</p>
                </div>
                <div class="col-3">
                    <p>Order Number:</p>
                </div>
                <div class="col-3">
                    <p>Items:</p>
                </div>
            </div>
            <div>
                <div class="row">
                    <div class="col-3">
                        <p><strong>{{ order.date }}</strong></p>
                    </div>
                    <div class="col-3">
                        <p><strong>&euro;{{ order.grand_total | floatformat:2 }}</strong></p>
                    </div>
                    <div class="col-3">
                        <a href="{% url 'order_history' order.order_number %}" title="{{ order.order_number }}">
                            {{ order.order_number|truncatechars:8 }}
                        </a>
                    </div>
                    {% for item in order.lineitems.all %}
                    <div class="col-3">
                        <p><strong>{{ item.product.name }} x
                                {{ item.quantity }}</strong></p>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
        </div>

На рисунке представлен текущий вывод. Я пытаюсь получить список элементов, расположенных друг под другом. Order History

<div class="col-3">
{% for item in order.lineitems.all %}
<p><strong>{{ item.product.name }} x
{{ item.quantity }}</strong></p>
{% endfor %}
</div>

решил проблему.

Вернуться на верх