如何使用Bootstrap 5实现适配多终端的响应式卡片布局

问题原因 #

你当前的代码栅格类配置不符合三类设备的列数要求，基于Bootstrap默认栅格断点规则：

• 小于768px为移动端尺寸
• 768px-991px为平板（iPad）尺寸
• 大于等于992px为桌面端尺寸
  原代码中的col-md-4会让平板端每行展示3列，同时没有显式配置移动端的单列规则，才会出现适配异常的问题。

调整方案 #

将每个卡片的类从col-lg-3 col-md-4替换为col-12 col-md-6 col-lg-3即可，三个类分别对应三类设备的列数需求：

• col-12：移动端占满12格宽度，实现单列展示
• col-md-6：iPad端占6格宽度，12/6=2，实现双列展示
• col-lg-3：桌面端占3格宽度，12/3=4，实现四列展示

修改后完整代码 #

<div class="col-md-12"> 
<div class="row grid">

<div class="col-12 col-md-6 col-lg-3"> Card 1 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 2 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 3 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 4 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 5 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 6 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 7 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 8 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 9 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 10 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 11 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 12 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 13 </div>
<div class="col-12 col-md-6 col-lg-3"> Card 14 </div>
 
</div> 
</div>

内容的提问来源于stack exchange，提问作者Smart Code