Bootstrap 根据屏幕大小显示行中的元素数

Posted 2023-03-05

【中文标题】Bootstrap 根据屏幕大小显示行中的元素数

【英文标题】：Bootstrap display number of elements in row based on screen size

【发布时间】：2018-05-30 19:47:49

【问题描述】：

如果用户使用的是中型设备 (≥768px)，我需要连续显示 3 张图像，如果他们使用的是 (

【参考方案1】：

利用 Bootstrap 列：

<div class="container">
    <div class="row">
        <div class="col-6 col-md-4">
            <img class="img-fluid" src="example.com/example.jpg"/>
        </div>
        <div class="col-6 col-md-4">
            <img class="img-fluid" src="example.com/example.jpg"/>
        </div>
        <div class="col-6 col-md-4">
            <img class="img-fluid" src="example.com/example.jpg"/>
        </div>
    </div>
</div>

https://getbootstrap.com/docs/4.0/layout/grid/

如果您想自己做，最佳做法是将 768px 代码放在一个媒体查询中，这样页面就是“移动优先”。

<div class="flexbox">
    <img class="flex-image" src="example.com/example.jpg"/>
    <img class="flex-image" src="example.com/example.jpg"/>
    <img class="flex-image" src="example.com/example.jpg"/>
</div>

--

.flexbox 
    display: flex;
    flex-wrap: wrap;

.flex-image 
    flex: 0 0 50%;


@media screen and (min-width: 768px) 
    .flex-image 
        flex: 0 0 33%;
    

【参考方案2】：

*-device-width的用法，像这样

@media screen and (max-device-width:767px) 
  .contImg 
    width: 50%;
  


@media screen and (min-device-width:768px)  
  .contImg 
    width: 33.33%;
  

* 
  box-sizing: border-box;


.contImg 
  float: left;


.contImg img 
  width: 100%;
  height: 250px;


@media screen and (max-device-width:767px) 
  .contImg 
    width: 50%;
  


@media screen and (min-device-width:768px)  
  .contImg 
    width: 33.33%;
  

<div class="contImg">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w">
</div>

<div class="contImg">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
</div>

<div class="contImg">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeY54SaYkaOxxyXlu_ng21EMIBZvJjnZBNQAOsIh_0_6Tvu9et">
</div>