html - 如何在 Angular4 中的两行产品之间留出空间

Question

在我的应用程序中，我绑定(bind)了产品及其来自 API 动态响应的详细信息。这里我遇到一个问题，例如当行数超过 1 时，产品之间没有空格。

HTML。

<div class="row">

    <div class="col-sm-4 column" *ngFor="let product of products;let i =index;">
        <div class="card">
            <div class="card-img-top card-img-top-250 one">
                <img routerLink="/my-cart" class="img-fluid" [src]="product['IMAGE_PATH_1']" alt="image">
                <img routerLink="/my-cart" class="img-fluid two" [src]="product['IMAGE_PATH_2']" alt="image">
            </div>
            <div class="card-block pt-2">
                <div class="col-sm-12 text-center card-text">
                    <span>{{product?.ITEM_DESCRIPTION}}</span>
                    <br>
                    <input type="hidden" #productCode value="{{product?.PRODUCT_CODE}}">
                    <p class="font-weight-bold text-primary" >{{product?.PRODUCT_PRICE}} &#8377;</p>
                </div>
                <button type="button" class="btn  btn-primary col-sm-12 corner" routerLink="/my-cart" (click)="getProductCode(productCode.value)">
                    <strong>View Details</strong>
                </button>
            </div>
        </div>
    </div>

</div>

上面的代码是一个单独的组件(grid组件)，我只是在另一个组件(app组件)中调用这个组件

 <div class="row  container" >
          <app-grid></app-grid>
 </div>

图片:

谁能帮我解决这个问题。

Answer 1

尝试使用 Bootstrap 4 间距实用程序:https://getbootstrap.com/docs/4.0/utilities/spacing/

我添加了 p-3 到 <div class="col-sm-4 column p-3" *ngFor="let product of products;let i =index;">

<div class="row">

    <div class="col-sm-4 column p-3" *ngFor="let product of products;let i =index;">
        <div class="card">
            <div class="card-img-top card-img-top-250 one">
                <img routerLink="/my-cart" class="img-fluid" [src]="product['IMAGE_PATH_1']" alt="image">
                <img routerLink="/my-cart" class="img-fluid two" [src]="product['IMAGE_PATH_2']" alt="image">
            </div>
            <div class="card-block pt-2">
                <div class="col-sm-12 text-center card-text">
                    <span>{{product?.ITEM_DESCRIPTION}}</span>
                    <br>
                    <input type="hidden" #productCode value="{{product?.PRODUCT_CODE}}">
                    <p class="font-weight-bold text-primary" >{{product?.PRODUCT_PRICE}} &#8377;</p>
                </div>
                <button type="button" class="btn  btn-primary col-sm-12 corner" routerLink="/my-cart" (click)="getProductCode(productCode.value)">
                    <strong>View Details</strong>
                </button>
            </div>
        </div>
    </div>

</div>