Карты Bootstrap правильно сложены

Question

У меня есть колода загрузочных карт, которая выглядит следующим образом:

<div class="card-deck">
    <div class="card">
        <img class="card-img-top" src=".." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src=".." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src=".." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
</div>

Проблема в том, что я хочу, чтобы они складывались таким образом, чтобы строки выглядели одинаково. В настоящее время, когда экран имеет такой размер, что 2 карты находятся сверху, а одна - снизу, карты имеют разные размеры. Я хочу, чтобы карты всегда были одинакового размера, а в случае, когда 3 карты и только 2 подходят горизонтально, 3-я карта того же размера, что и 2 сверху, однако с плавающей точкой левый. У меня проблема в том, что я не могу просто установить минимальную и максимальную ширину, так как размер карточек меняется, я просто хочу, чтобы их размер всегда менялся вместе, чтобы они были одинаковыми.
текущий результат пример желаемого результата

Я бы хотел, чтобы это выглядело как желаемый результат (без карты справа внизу)

Answer 1

Поскольку на картах такого поведения не ожидается, попробуйте поместить их в строки и столбцы и добавить ожидаемый размер для каждого столбца.

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card">
         ...
        </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card">
         ...
        </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card">
         ...
        </div>
    </div>
</div>

если у вас получатся карты разной высоты, добавьте где-нибудь правило или новый класс с правилом для height: 100%; и примените его к карте.

Answer 2

Может быть, попробуйте обернуть свои карты в контейнер, а затем строки.