如何使用Bootstrap网格系统实现iPad端仅显示两列布局

问题原因 #

你使用的Bootstrap栅格系统默认断点规则如下：

• col-md-4 生效区间为屏幕宽度 ≥768px 且 <992px，对应12栅格系统占4份，一行会自动排布3列
• 常规iPad竖屏宽度刚好为768px，恰好落在md断点区间，因此会渲染为三列布局，不符合你预期的两列效果。

解决方案 #

调整栅格类配置即可实现需求，以下是通用适配方案：
将循环项的class属性从 col-lg-3 col-md-4 替换为 col-lg-3 col-md-6 col-sm-12，修改后完整代码如下：

<div class="container px-5">
<div class="row"> 
 <div class="col-md-12">
 <div class="filters-content">

   <div class="row grid">
     <div *ngFor="let item of result" class="col-lg-3 col-md-6 col-sm-12">
       
     </div> 
   </div>

 </div>
 </div>
</div>
</div>

上述配置的适配效果：

• 屏幕宽度≥992px（桌面端、iPad横屏）：一行展示4列
• 屏幕宽度≥768px且<992px（iPad竖屏）：一行展示2列
• 屏幕宽度<768px（手机端）：一行展示1列

如果需要iPad横屏也展示两列，只需将col-lg-3修改为col-lg-6即可，此时桌面端也会同步变为两列布局。

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