Как я могу установить отступы и поля прямо на карточке, когда есть ngIf? - PullRequest
Новая
       21

Как я могу установить отступы и поля прямо на карточке, когда есть ngIf?

0 голосов
/ 18 июня 2020

Я хочу составить список продуктов, но когда я устанавливаю отступ и нажимаю кнопку «Добавить в корзину», становится еще хуже. Это мой код HTML: 

<div class="container body">
  <div class="row align-items-stretch">
      <div class="col-lg-3 col-6 mb-3 d-flex card-group" *ngFor="let item of items; index as i">
          <div class="card" style="width: 18rem;">
              <img class="card-img-top" [src]="item.photoURL" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title" style="font-size: 1rem;">{{item.productName}}</h5>
                <p class="card-text">{{item.price}}</p>

                <button class="btn btn-primary button" (click)="addCart(i)" *ngIf="add === -1">Add to cart</button>
                <div *ngIf="add === i">
                  <input type="number" class="form-control" placeholder="quantity:" #quantity>
                  <button class="btn btn-primary" (click)="buy(quantity.value)">Buy</button>
                </div>

              </div>
            </div>
      </div>
  </div>
</div>

, и я пробовал его как CSS, но когда я нажимаю кнопку «Добавить в корзину», поле pu sh на входе, и появляется большой отверстие. Я хочу сделать его отзывчивым. 

.button {
    position: absolute;
    bottom: 2rem;
}

.card-text {
    margin-bottom: 60px;
}

Кто-нибудь может мне помочь, как исправить? Даже если он работает на телефоне или iPad.

...