Bootstrap中Div堆叠问题求助：屏幕缩小时底部Div堆叠如何修复？

嘿，这个问题我之前也碰到过！其实是因为你的项目布局依赖了固定宽度+浮动的方式，当屏幕宽度小于所有项目的宽度总和时，元素就会因为放不下而混乱堆叠。我给你两个靠谱的解决方案，都是现在主流的响应式布局方法，能完美适配不同屏幕尺寸：

方案一：使用Flexbox布局 #

Flexbox是非常灵活的布局方式，能轻松控制元素的排列和换行逻辑。

修改容器样式 #

首先修改包裹项目的容器（比如.projects类）的CSS，替换掉原来的浮动相关代码：

.projects {
  display: flex;
  flex-wrap: wrap; /* 允许空间不足时换行，但我们会通过媒体查询控制时机 */
  gap: 20px; /* 项目之间的间距，比手动设置margin更简洁 */
  justify-content: space-between; /* 保持项目两端对齐，视觉更整齐 */
}

修改单个项目样式 #

然后调整每个项目（.project类）的样式，去掉固定宽度，改用flex属性实现自适应：

.project {
  /* 移除原来的float: left和固定width属性 */
  flex: 0 1 calc(33.333% - 20px); /* 每个项目占容器1/3宽度，减去gap的间距 */
  /* 保留你原来的背景、padding等样式 */
}

添加媒体查询适配小屏幕 #

为了在不同尺寸的屏幕上都有好的显示效果，加上媒体查询调整项目宽度：

/* 平板屏幕（768px以下）时，一行显示2个项目 */
@media (max-width: 768px) {
  .project {
    flex: 0 1 calc(50% - 20px);
  }
}

/* 手机屏幕（480px以下）时，一行显示1个项目 */
@media (max-width: 480px) {
  .project {
    flex: 0 1 100%;
  }
}

方案二：使用CSS Grid布局（更简洁） #

CSS Grid是专门为二维布局设计的，代码更简洁，自动适配能力更强：

修改容器样式 #

直接给.projects容器设置Grid布局：

.projects {
  display: grid;
  /* 自动适配列数，每个项目最小宽度300px，剩余空间自动分配 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; /* 项目之间的间距 */
}

项目样式调整 #

只需要移除.project原来的float: left和固定width属性，保留其他样式即可。

这个方案会自动根据屏幕宽度调整列数：屏幕足够宽时显示3列，宽度缩小到不足以容纳3个300px的项目时，自动变成2列，再小就变成1列，完全不用手动写媒体查询，非常省心！

内容的提问来源于stack exchange，提问作者jupiter