尝试将lg的断点从默认值更改为1025:
@import "../scripts/bootstrap-4.1.1/scss/bootstrap";
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 1025px,
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 993px,
xl: 1140px
);
我希望在我的平板电脑上(横向模式下为1024px)将以下卡片2叠加在2而不是1以上4.这种改变似乎没有效果。
<div id="home">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<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-lg-3 col-md-6 col-sm-6 col-xs-12">
<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-lg-3 col-md-6 col-sm-6 col-xs-12">
<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-lg-3 col-md-6 col-sm-6 col-xs-12">
<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>
</div>