Отзывчивая колода карт такой же ширины

Question

Я настраиваю веб-приложение, которое вызывает рендеринг динамического числа карт, который будет отображать некоторую информацию.

Мне удалось заставить их использовать одинаковую высоту, но я понятия не имел, как заставить их использовать одинаковую ширину и высоту, даже если они содержат меньше карточек в ряду, чем подходящее количество,они растягиваются, и я не хочу такого поведения.

    <div class="card-deck">

    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">Titel</h4>
        <h6 class="card-subtitle mb-2 text-muted">Subtitle</h6>
        <p class="card-text">Text break </p>
        <button class="btn btn-primary my-2 my-sm-0" type="submit"><fa-icon [icon]="['fas', 'sign-in-alt']"></fa-icon> Login</button>
      </div>

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

Expected result: Every card uses the same width
Actual result: Cards in the last row (if they are less than the amount that would fit) stretch to the whole container

Answer 1

это может быть достигнуто с помощью

<div class="card mb-4 col-x">

, где x в столбце x, может варьироваться от 1 до 12 ( из сетки начальной загрузки ),

будет генерировать колоды указанной ширины.

Пожалуйста, обратитесь к ссылке на код:

https://codepen.io/diveshpanwar/pen/WqvPNW

Узнайте больше о Bootstrap grid