html - 无论内容如何，​​如何设置 bootstrap 4 卡的最大高度相等？

Question

<div class="container" style="margin-top:30px;">
  <div class="row">
    <div class="col-4 col-sm-4 col-md-4 col-lg-4" *ngFor="let book of webService.books_list | async">
      <div class="card h-30 text-white bg-light text-dark mb-3">
        <img class="card-img-top" src="{{ book.imgm }}" alt="Card image top" alt="Responsive image" class="img-fluid">
        <div class="card-body">
          <h5 class="card-title">{{ book.title }}</h5>
          <p class="card-text">{{ book.blurb }}</p>
          <a class="btn btn-primary" [routerLink]="['/books', book._id]" style="cursor: pointer">View Reviews</a>[enter image description here][1]
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要更改卡片高度等级。 h-30 到 h-100

 <div class="container" style="margin-top:30px;">
      <div class="row">
        <div class="col-4 col-sm-4 col-md-4 col-lg-4" *ngFor="let book of webService.books_list | async">
          <div class="card h-100 text-white bg-light text-dark mb-3">
            <img class="card-img-top" src="{{ book.imgm }}" alt="Card image top" alt="Responsive image" class="img-fluid">
            <div class="card-body">
              <h5 class="card-title">{{ book.title }}</h5>
              <p class="card-text">{{ book.blurb }}</p>
              <a class="btn btn-primary" [routerLink]="['/books', book._id]" style="cursor: pointer">View Reviews</a>[enter image description here][1]
            </div>
          </div>
        </div>
      </div>
    </div>