Bootstrap导航栏折叠后留白且下推内容 如何让图片区域填充空余空间

问题根因 #

1. 视口元标签配置错误，固定宽度为320px，无法正确适配不同尺寸的移动端屏幕
2. CSS Grid未做响应式断点适配，全尺寸段共用同一套网格布局规则，移动端导航折叠后左侧网格区域仍保留占位，导致右侧图片区域无法填充空白
3. 导航组件缺失navbar基础类，同时HTML存在标签闭合错误，导致导航折叠/展开样式异常
4. 网格行配置为固定规则，导航展开时高度变化会直接挤压下方页面元素

解决方案 #

1. 修正基础配置和语法错误

• 替换视口元标签，适配移动端响应式：
  把原代码中<meta name="viewport" content="width=320" />替换为
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
• 修正导航类名：将<nav class="nav-navbar navbar-expand-lg navbar-light">修改为
  <nav class="navbar navbar-expand-lg navbar-light">，补全Bootstrap导航必需的基础类
• 修复HTML语法错误：将闭合异常的<a class="nav-link" href="#">OPTION X/a>修改为
  <a class="nav-link" href="#">OPTION X</a>

2. 改写响应式CSS Grid布局

修改原有CSS代码，按Bootstrap的lg断点（992px）做布局适配，大屏用双列布局，小屏自动切为单列避免左侧空白：

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

/* 屏幕宽度≥992px时启用桌面端双列布局 */
@media (min-width: 992px) {
  .wrapper {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
  }
  .mens {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
  .bars {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .pics {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}

3. 可选：移动端导航悬浮不挤压内容

如果需要移动端导航展开时不向下挤压其他元素，可添加以下CSS让折叠菜单脱离文档流悬浮展示：

/* 屏幕宽度<992px时启用导航悬浮样式 */
@media (max-width: 991.98px) {
  .mens {
    position: relative;
    z-index: 100;
  }
  .mens .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}

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