Question

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

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>

上面的代码是一个单独的组件（网格组件），我只是在另一个组件（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>

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

1 个答案: