html - 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 张卡片在顶部，1 张在底部时，卡片的大小不同。我希望它是这样的卡片总是彼此相同的大小，并且在有 3 张卡片并且只有 2 张水平放置的情况下，第 3 张卡片与顶部的 2 张卡片大小相同，但是 float 到左边。我遇到的问题是我不能简单地设置最小和最大宽度，因为卡片的大小会发生变化，我只希望它们的大小始终一起变化，以便它们相同。
current result desired result example

我希望它看起来像想要的结果(没有右下角的卡片)

Answer 1

也许可以尝试将您的卡片包装到一个容器中，然后再排成一排。