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

Question

我试图在 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

标签： cssangularbootstrap-4media-queries

Answer 1

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

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

这是在stackblitz上