html - 引导卡正确堆叠

我有一副引导卡，其外观如下：

<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>

问题是我希望它们以行看起来相同的方式堆叠。当前，当屏幕的大小使得其中两张卡在顶部而一张卡在底部时，卡的大小不同。我希望这样，以便卡总是彼此相同，并且在有3张卡且水平只能容纳2张的情况下，第3张卡的大小与顶部2张的大小相同，但是浮动到左边。我遇到的问题是，由于卡的大小会发生变化，因此我不能简单地设置最小和最大宽度，我只希望它们的大小始终一起变化，以使它们相同。
current result
desired result example

我希望它看起来像预期的结果（右下角没有显示卡）

最佳答案

也许尝试将您的卡片包装到一个容器中，然后行。