Bootstrap 4 网格列的CSS显示不正确

使用Django和Bootstrap开发购物车。产品显示在1列中。这适用于移动设备，但不适用于台式机或ipad。我需要产品并排出现在大多数购物/电子商务网站上

我使用互联网上的各种信息更改了网格模板列设置，但运气不好。网格间隙工作，所以我知道css正在被看到

 <div class="container">
 {% for products in products %}

 <div class="row"> {% if products.name %}
 <div class="products_all">

<div class="col-3 col-md-3 col-lg-2 products_all">
<div class="card" style="width: 18rem;">
   <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">{{ products.name }}</h5>
                <p class="card-text">{{ products.description }}</p>
                         <a href="#" class="btn btn-primary">Go somewhere</a>
 </div> <!-- card -->
</div> <!-- card body -->
{% endif %}
{% endfor %}
</div> <!--   </div> col end div --->
</div> <!--- products_all ---->
</div> <!-- row end div --->
</div> <!-- container end div --->



.products_all {
/***
padding-top: 2.2550rem;
***/
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;

 }

 .card {

background: white;
text-decoration: none;
color: #444;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

{产品%中的产品的百分比}
{%if products.name%}
{{products.name}
{{products.description}
{%endif%}
{%endfor%}
.所有产品{
/***
垫面：2.2550rem；
***/
显示：网格；
网格模板列：1fr；
栅隙：10px；
}
.卡片{
背景：白色；
文字装饰：无；
颜色：#444；
盒影：0.2px 5px rgba（0,0,0,0.1）；
}

列保持在左侧，并且不会更改为多个列

---

为每个产品生成一行：

<div class="container">
{% for products in products %}    
    <div class="row"> {% if products.name %}

{产品%中的产品的百分比}
{%if products.name%}

他们怎么能肩并肩

只需将

从循环中取出即可解决问题：

<div class="container">
    <div class="row products">
    {% for product in products %}   
    {% if product.name %}
        <div class="col-3 col-lg-2 product">    
            <div class="card"> ... </div>

{products%中产品的%s}
{%if product.name%}
... 

谢谢大家现在工作。