Как дать пространство между двумя рядами продуктов в Angular4

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>

Приведенный выше код является отдельным компонентом (компонент сетки), я просто называю этот компонент в другом компоненте (компонент приложения)

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