我試圖在iPad中顯示兩列，但它是3列。如何為此編寫引導CSS？我已經(jīng)為此寫了媒體查詢。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類來實現(xiàn)所需的布局。這將使每個項目在超小屏幕(即寬度小于576像素的屏幕)上占據(jù)12列，在小屏幕(即寬度為576像素或以上的屏幕)上占據(jù)6列，在中等屏幕(即寬度為768像素或以上的屏幕)上占據(jù)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>

這應該在超小型屏幕上每行顯示一個項目，在小型屏幕上每行顯示兩個項目，在中型和大型屏幕上每行顯示四個項目。