Question

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

我使用在互联网上找到的各种信息更改了grid-template-columns的设置，但是没有运气。 grid-gap有效，因此我知道正在看到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);

}

列停留在左侧，并且不会更改为多于一列。

https://d.pr/i/qBkSip

Answer 1

您为每个产品生成一行：

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

它们如何并排？

只需将<div class="row">移出循环即可解决该问题：

<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>

网格列的CSS无法正确显示

1 个答案: