Предотвратить расширение карты в колоду карт

Question

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

Как это должно выглядеть (пример iPad)

Как это выглядит (пример iPad)

На широкоэкранном экране та же проблема: https://i.imgur.com/zJtXhTl.png

Код (пример из 5 карт)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="card-deck">

        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>

        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>

        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>

        <div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>

        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>

        <div class="w-100 d-none d-lg-block d-xl-none"><!-- wrap every 4 on lg--></div>
        <div class="w-100 d-none d-xl-block"><!-- wrap every 4 on xl--></div>


        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
   
    </div>
</div>

Я видел это https://github.com/twbs/bootstrap/issues/19650 и пытался использовать

.card {
    width: initial;
}

, но не повезло.

Answer 1

Как объяснено в документации, колоды карт еще не реагируют , поэтому будет сложно получить желаемый макет без большого количества CSS. Это из-за того, что дочерние элементы (карты) flexbox растут по ширине.

Вместо этого используйте в сетке карты полной высоты ...

<div class="row">
        <div class="col-md-4 col-sm-6 pb-4">
            <div class="card h-100">
                ....
            </div>
        </div>
        <div class="col-md-4 col-sm-6 pb-4">
            <div class="card h-100">
                ....
            </div>
        </div>
        <div class="col-md-4 col-sm-6 pb-4">
            <div class="card h-100">
                ....
            </div>
        </div>
          .... (more columns with cards)
</div>

https://www.codeply.com/go/hs12dUxHnQ