• 这是代码。此代码清单是垂直完成的。Here is the current output I want to make this vertically.
• 这是我编写的当前代码。

{% extends 'index.html' %}
{%block body_block%}

{%for p in carslist%}
<section class="py-5">
    <div class="container px-4 px-lg-5 mt-2">
        <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="{{p.carpic.url}}" alt="..." />
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <h5 class="fw-bolder">{{p.carcompany}}</h5>
                            <p>{{p.carmodel}}</p>
                            <!-- Product price-->
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">Price: {{p.carprice}}</li>
                            <li class="list-group-item">Kms: {{p.carkms}}</li>
                          </ul>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View Details</a></div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>
{%endfor%}