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>

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

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

Answer 1

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

Answer 2

由于这不是卡片上的预期行为，请尝试将其放置在行和列内，并为每列添加预期的大小。

<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%;的规则添加到新类中，并将其应用于该卡。

引导卡正确堆叠

2 个答案: