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

时间:2017-12-17 03:38:31

标签: html css twitter-bootstrap flexbox media-queries

如果用户在中等大小的设备(≥768px)上并且如果他们在(< 768px)设备上,我需要连续显示3个图像,然后我需要连续显示2个图像。如何使用Bootstrap或plain flex执行此操作。

2 个答案:

答案 0 :(得分:3)

使用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/

如果您想自己动手,最佳做法是将&lt; 768px代码置于媒体查询之外,将&gt; 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%;
    }
}

答案 1 :(得分:1)

使用*-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>