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