Question

我连续有一组图像，我希望它们在lg设备上显示为4张图像，在sm和md设备上显示为2张图像，但是我对如何使用网格来实现这一点感到困惑。这是我的引导程序代码。您可以在“技能”部分中看到效果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

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

1 个答案: