淘先锋技术网

首页 1 2 3 4 5 6 7

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

我试图在iPad中显示两列，但它是3列。如何为此编写引导CSS？我已经为此写了媒体查询。col-lg-3 co l-md-4在iPad上无法正常工作。我不知道该增加哪一科。如果有人知道请帮忙找解决办法。

<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://stack blitz . com/edit/angular-selvam-ecommerce-task-D1 rhft？file = src % 2f app % 2f directives % 2f products list . dir . ts

我明白了，在这种情况下，你可以使用col-12 col-sm-6 col-md-4类来实现所需的布局。这将使每个项目在超小屏幕(即宽度小于576像素的屏幕)上占据12列，在小屏幕(即宽度为576像素或以上的屏幕)上占据6列，在中等屏幕(即宽度为768像素或以上的屏幕)上占据4列。 以下是更新后的代码片段:

<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-12 col-sm-6 col-md-4">
            <!-- Your item content here -->
          </div> 
        </div>
      </div>
    </div>
  </div>
</div>

这应该在超小型屏幕上每行显示一个项目，在小型屏幕上每行显示两个项目，在中型和大型屏幕上每行显示四个项目。