Css 使div响应

我有一个部分，有4个div，居中

我需要做下一步：

当屏幕宽度大于1280px时，它会连续显示4个div， 当屏幕宽度小于1280px时，每行需要显示2个div 当屏幕宽度小于640px时，每行一个

html

---

使用引导网格，可以设置每个大小的列宽度

引导网格系统有四个类：

• xs-超小型（适用于手机）
• sm-小型（用于片剂）
• md-中等（适用于台式机）
• lg-大型（适用于大型台式机）

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

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

---

您可以将该类应用于gallery div

它将使您的行在xs（超小型）中显示1个图像，在sm（中型）中显示2个图像，在更大的屏幕上显示4个图像；md（中型和大型/lg）

---

希望它能澄清一点：）

为此使用引导是完全没有必要的

您可以使用一些简单的CSS来实现这一点：

.gallery div{
背景颜色：粉红色；
宽度：100%；
高度：300px；
浮动：左；
}
.图库分区：第n个类型（偶数）{
背景颜色：矢车菊蓝；
}
.清楚{
明确：两者皆有；
}
@介质（最小宽度：640像素）{
.画廊组{
宽度：50%；
}
}
@介质（最小宽度：1280px）{
.画廊组{
宽度：25%；
}
}

为什么不使用引导？这是一个大学项目，所以我需要构建网格。对于这样琐碎的事情，我的自引导是完全没有必要的。@Timur您可能想看看使用

框大小：border box。
.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;
  }

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

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