javascript - 如何在不同设备上连续显示固定数量的图像

Question

我有一组连续的图像，我希望它们在 lg 设备上显示为 4 个图像，在 sm 和 md 设备上显示为 2 个图像，但我对如何使用网格来实现这一点感到困惑。这是我的bootstrap代码，你可以看到效果here在技​​能部分。当您调整屏幕大小时使图像占据屏幕的完整宽度时，

如何让它们只占宽度的 50%，以便连续显示 2 张图像。

img{
  height: 200px;
}

<div class="row pr-3 pt-1 pl-3 pb-3">
  <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> 
       <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
       <div class="card-body">
            <h5 class="card-title">grid1 </h5>
     
       </div>
  </div> 
  <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> 
       <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
       <div class="card-body">
            <h5 class="card-title">grid2</h5>
        </div>  
 </div>
 <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> 
      <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
      <div class="card-body">
           <h5 class="card-title">grid3</h5>
      </div>
 </div>
 <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> 
      <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
      <div class="card-body">
           <h5 class="card-title">grid4</h5>
           </div>
 </div>  
 </div>
            

Answer 1

将网格类从 col-md-3 替换为 col-md-6