从JSON中拉入的产品没有显示在网格中

Question

我正在从JSON文件中提取内容，以填充我正在开发的电子商务网站的产品网格。当数据加载时，它将所有产品显示在1列或(1行)中，而不是显示在网格中。这部分的所有CSS都来自Bootstrap 4的默认值。我需要你的帮助去做这件事。

感谢下面的代码将它们显示在一个名为"产品"的页面上

<div class="product container d-flex justify-content-center mt-50 mb-50"> 
<div class="card">
<div class="card-body">
<div class="card-img-actions"> <img src="{{product.imageUrl}}" class="card-img img-fluid" width="96" height="350" alt=""> </div>
</div>
<div class="card-body bg-light text-center">
<div class="mb-2">
<h6 class="font-weight-semibold mb-2"> <a routerLink="/products/{{product.id}}" class="text-default mb-2" data-abc="true">{{product.title}}</a> </h6> 
</div>
<h3 class="mb-0 font-weight-semibold">{{product.price}}</h3>
Available in size: {{product.size}} 
<button type="button" class="btn bg-cart"> Buy Now </button>
</div>
</div>
</div>

下面是我对products.components.html的修改

<app-header></app-header>
<app-item *ngFor="let product of products" [product]= "product"></app-item> 
<app-footer></app-footer>

这是我想要达到的预期结果

这是我得到的

输入图片描述

Answer 1

我认为你没有遵循如何构建卡片网格的引导原则。

当你把你的。container类放入app-item时，你将在每个循环中创建一个新的容器，我猜这是你不想要的。相反，您只需要一个容器，然后将卡片作为列。

看到https://getbootstrap.com/docs/5.1/components/card/grid-cards

<app-header></app-header>
<div class="container">
<div class="row row-cols-md-3">
<ng-container *ngFor="let product of products">
<app-item [product]="product"></app-item> 
</ng-container>
</div>
</div>
<app-footer></app-footer>

在你的app-item中你只有列。

<div class="product col"> 
<div class="card">
...
</div>
</div>