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)上建立单张卡(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
• (下面的become会堆叠成全宽度)

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

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