Bootstrap4 堆叠卡

Question

新手引导，我正在尝试学习如何堆叠卡片。我有以下代码：

<div id="home">
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 1</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 2</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 3</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 4</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>                      
        </div>
    </div>
</div>

在一行产生 3 张卡片，在第二行产生一张卡片。 我希望在单行 (lg) 上建立 4 张卡片，在一行上建立 2 张卡片，在第二行 (md) 上建立 2 张卡片，最后是堆叠在一起的单张卡片 (sm)。

当我调整浏览器的大小时，我注意到卡片的大小也在调整，我需要卡片保持相同的大小并随着屏幕大小的调整而相应地堆叠。需要一些帮助，请。

Answer 1

你会为每一列使用这个：

<div class="col-md-6 col-lg-3">
      <div class="card">
           ..
      </div>
</div>

演示： https://www.codeply.com/go/nnBMQjZA3R

工作原理：

• col-lg-3 - 在 lg 及以上使用 3/12
• col-md-6 - 在 md 上使用 6/12
• （低于 md cols 将堆叠并变为全角）

---

或者，您可以在lg 上使用自动布局列，因为col-* 将均匀地填充行...

<div class="col-md-6 col-lg"></div>