Bootstrap列未堆叠反而收缩：着陆页媒体资源区块布局异常求助

嘿，我来帮你捋捋这个响应式布局的坑！你遇到的模块收缩不堆叠的情况，大多是因为响应式布局的核心规则没设置到位，我给你列几个最常见的排查方向和解决方案：

1. 检查Flex布局的换行规则（如果用了Flex） #

如果你的媒体资源父容器用了display: flex，默认的flex-wrap值是nowrap——这就意味着空间不够时，子元素会被迫收缩而不是换行堆叠，这大概率是问题所在！

修正方法：
给父容器加上换行规则，再给子模块设置最小宽度，确保窗口窄到一定程度时自动换行：

/* 媒体资源父容器 */
.media-resources {
  display: flex;
  flex-wrap: wrap; /* 关键：允许子元素换行堆叠 */
  gap: 1.5rem; /* 可选：给模块间加间距，视觉更舒适 */
}

/* 子模块（视频、支持资料、社交媒体） */
.media-resources__module {
  flex: 1 1 300px; /* 有空余空间时扩展，空间不足时可收缩，最小宽度基准300px */
}

这样设置后，当窗口宽度小于3个模块的最小总宽度时，模块就会自动堆叠成单列或双列。

2. 检查Grid布局的自适应规则（如果用了Grid） #

如果父容器用的是Grid布局，那大概率是grid-template-columns没设置成自适应规则，导致不管窗口多窄都强制保持多列。

修正方法：
用auto-fit配合minmax实现自动适配：

.media-resources {
  display: grid;
  /* 自动根据容器宽度调整列数，最小列宽300px，最大占满剩余空间 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

这个规则会让Grid自动判断能放下几列，空间不够时自动堆叠成单列。

3. 检查是否有强制收缩的属性 #

有时候子模块会继承默认的flex-shrink: 1，或者只设置了百分比宽度但没限制最小宽度，导致一直收缩而不换行。你可以给子模块加上最小宽度，或者在小屏幕断点里直接强制单列：

@media (max-width: 768px) {
  .media-resources__module {
    width: 100%; /* 小屏幕下强制单列显示 */
  }
}

4. 排查样式冲突 #

别忘了检查有没有其他CSS规则（比如第三方框架、全局样式）干扰了布局，比如overflow: hidden、white-space: nowrap或者position: absolute这类属性。可以用浏览器开发者工具（F12）选中模块，查看“Styles”面板里的生效规则，看看有没有意外的属性被应用。

按照上面的步骤排查，应该就能解决模块收缩不堆叠的问题啦！

内容的提问来源于stack exchange，提问作者M. Straw