html - 防止卡片在卡片组中扩展

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

如文档中所述，card-deck's aren't yet responsive因此，如果没有大量额外的 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