我有一个有4个div的部分,它们居中。
我需要做下一个:
当屏幕宽度大于1280像素时,它会连续显示4个div, 当屏幕宽度小于1280px时,每行需要显示2个div 当屏幕宽度小于每行640px时。
HTML
<section class="gallery">
<div class="flex flex--center">
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
</div>
</section>
CSS
.flex{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex--center{
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.gallery-div{
background-color:pink;
width:300px;
height300px;
margin:10px 5px;}
@media (max-width: 640px) {
.home-section .flex {
display: block;
}
答案 0 :(得分:3)
使用Bootstrap是完全没必要的!
你可以用一些简单的CSS来做到这一点:
o
.gallery-div{
background-color:pink;
width: 100%;
height:300px;
float: left;
}
.gallery-div:nth-of-type(even) {
background-color: cornflowerblue;
}
.clear {
clear: both;
}
@media (min-width: 640px) {
.gallery-div{
width: 50%;
}
}
@media (min-width: 1280px) {
.gallery-div{
width: 25%;
}
}
答案 1 :(得分:0)
使用bootstrap网格,您可以设置每个尺寸的col宽度。
Bootstrap网格系统有四个类:
http://getbootstrap.com/css/#grid
您可以添加多个类,例如:
<div class="col-xs-12 col-sm-6 col-md-3"></div>
答案 2 :(得分:-1)
您可以将此课程应用于 gallery-div
<div class="col-xs-12 col-sm-6 col-md-3"></div>
它会使你的行在xs(extrasmall)中显示1个图像,在sm(中)中显示2并在更大的屏幕上显示4; md(中型和大型/ lg)
希望它能澄清一点:)