Bootstrap列在小屏幕尺寸下重叠问题求助

核心排查方向及修复建议 #

• 检查定位属性：如果项目列使用了position: absolute/fixed，移动端下未限制宽度会导致滚动时溢出覆盖标题列，建议改用position: relative，结合Flexbox/Grid做响应式布局。
• 切换移动端布局方向：在视口宽度≤500px时，将两列从横向改为垂直排列，从根源避免重叠：

@media (max-width: 500px) {
  .layout-container {
    flex-direction: column;
  }
  .project-list-column {
    width: 100%;
    overflow-y: auto;
    max-height: calc(100vh - 100px); /* 根据标题列实际高度调整数值 */
  }
}

• 确认overflow约束：确保项目列的overflow-y: auto在移动端生效，同时给父容器添加overflow: hidden，防止内容溢出到标题区域。
• 修正宽度挤压问题：若坚持移动端横向排列，给项目列设置flex: 1并添加min-width: 0，避免其挤压标题列的宽度空间。

若上述方法无法解决问题，可提供布局对应的HTML结构和CSS代码，以便精准定位问题。

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