如何修正瑜伽课程表页面窄屏下nav导航栏不堆叠的代码问题

核心实现逻辑 #

通过CSS媒体查询匹配窄屏视图，修改导航栏的布局规则，将水平排列改为垂直排列即可实现堆叠效果，以下是对应场景的代码示例：

代码修正示例 #

1. 常规导航栏HTML结构参考（如果你的结构和示例不同可以对应调整类名） #

<nav class="main-nav">
  <a href="home.html">首页</a>
  <a href="courses.html">瑜伽课程</a>
  <a href="timetable.html">课程表</a>
  <a href="contact.html">报名咨询</a>
</nav>

2. CSS样式修正 #

场景1：导航使用Flex布局（最常用场景）

/* 保留原有宽屏水平排列的样式 */
.main-nav {
  display: flex;
  gap: 32px;
  padding: 16px 24px;
  background: #f8f5f0;
}

/* 新增窄屏适配规则，768px为常用移动端适配阈值，可根据你的设计要求调整 */
@media (max-width: 768px) {
  .main-nav {
    /* 改为垂直方向排列实现堆叠 */
    flex-direction: column;
    /* 以下为可选样式，可根据你的预期效果图调整 */
    gap: 16px;
    padding: 16px;
    text-align: center;
  }
}

场景2：导航使用inline-block布局

/* 原有宽屏样式 */
.main-nav a {
  display: inline-block;
  margin-right: 32px;
}

/* 新增窄屏适配 */
@media (max-width: 768px) {
  .main-nav a {
    display: block;
    margin: 8px 0;
    margin-right: 0;
  }
}

场景3：导航使用Grid布局

/* 原有宽屏样式 */
.main-nav {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 32px;
}

/* 新增窄屏适配 */
@media (max-width: 768px) {
  .main-nav {
    grid-template-columns: 1fr;
  }
}

异常排查 #

• 媒体查询代码要放在原有导航样式的后面，避免被原有样式覆盖
• 打开浏览器开发者工具的元素面板，选中nav元素，查看是否有更高优先级的样式覆盖了你写的适配规则
• 确认媒体查询的阈值设置正确，避免你测试的屏幕宽度没有触发适配规则

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