Question

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

<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张卡片，在第二行上建立2张卡片（md），最后将单张卡片堆叠在一起（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>

Bootstrap4堆叠卡

1 个答案: