Question

我有一个有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;
  }

Answer 1

使用Bootstrap是完全没必要的！

你可以用一些简单的CSS来做到这一点：

.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%;
    }
}

Answer 2

使用bootstrap网格，您可以设置每个尺寸的col宽度。

Bootstrap网格系统有四个类：

xs - 超小（适用于手机）
sm - 小（适用于平板电脑）
md - 中（适用于桌面）
lg - 大（适用于较大的桌面）

http://getbootstrap.com/css/#grid

您可以添加多个类，例如：

<div class="col-xs-12 col-sm-6 col-md-3"></div>

Answer 3

您可以将此课程应用于 gallery-div

<div class="col-xs-12 col-sm-6 col-md-3"></div>

它会使你的行在xs（extrasmall）中显示1个图像，在sm（中）中显示2并在更大的屏幕上显示4; md（中型和大型/ lg）

希望它能澄清一点：）

让DIV响应

3 个答案: