如何使用引导网格在 ipad 中仅显示两列

Posted 2023-03-06

【中文标题】如何使用引导网格在 ipad 中仅显示两列

【英文标题】：How to show only two column in ipad using bootstrap grid

【发布时间】：2021-11-22 12:26:48

【问题描述】：

我试图在 iPad 中显示两列，但它即将出现 3 列。如何为此编写引导 CSS。我已经为此编写了媒体查询。 col-lg-3 col-md-4 不适用于 iPad。我不知道哪个 col 添加到类中。如果有人知道，请帮助找到解决方案。

<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-4">
       
     </div> 
   </div>

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

演示：https://stackblitz.com/edit/angular-selvam-ecommerce-task-d1rhft?file=src%2Fapp%2Fdirectives%2Fproductslist.dir.ts

【问题讨论】：

Bootstrap 的“平板电脑”类使用“sm”大小。不要使用 md（桌面）和 lg（字面意思是“更大的桌面”），而是尝试使用 sm 。

@HamzaAssada：你能在 stackblitz 中更新吗？

【参考方案1】：

尝试对您的 html 代码进行以下更改 class="col-sm-6 col-sm-6"：

...
     <div *ngFor="let item of result" class="col-sm-6 col-sm-6">
...

这里是stackblitz

【讨论】：

我期待像移动设备一列，iPad 两列，桌面 4 列。这意味着移动每行一张卡，iPad每行两张卡，台式机每行4张卡

你有什么解决办法吗？