防止卡在卡槽中扩展

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