Bootstrap 5响应式导航栏下拉菜单功能异常问题排查

你遇到的移动端菜单不显示、sticky吸顶失效问题全部来自自定义CSS和Bootstrap默认逻辑的冲突，外加1处HTML结构错误，和JS功能无关（你观察到元素class在collapsed、collapsing、collapse show之间正常切换，已经证明Bootstrap的交互JS是正常工作的）。你提到目前桌面端已经调试正常，本质是桌面端断点下导航横向排列，总高度没有超出你给导航栏写死的高度限制，没有触发裁剪，移动端展开后菜单纵向排列总高度超出容器限制，才会出现交互状态正常但内容不可见的问题。

具体冲突点 #

• HTML结构错误：导航栏logo位置的<img class="navbar-brand">标签后多余了一个无匹配开头的</a>闭合标签，会导致DOM树解析异常，影响后续元素渲染。
• 导航容器设置了内容裁剪：你给#navbar写死了height: 10vh+overflow: hidden，移动端点击展开的菜单总高度远大于10vh，所有展开的内容直接被父容器裁剪隐藏，这是移动端菜单看不到的核心原因。
• 全局列表样式破坏Bootstrap布局：全局选择器li设置了display: inline; margin-left: 100px;，直接覆盖了Bootstrap导航项、下拉菜单项默认的块级/Flex布局规则，导致菜单项排版错位、下拉菜单无法正常按块展示。
• 导航链接浮动样式冲突：你给#navbar a统一设置了float: left; height: 3vh;，和Bootstrap导航栏默认的Flex布局完全冲突，会导致菜单项定位偏移、高度异常。
• 折叠区域高度限制不合理：导航折叠容器上写死了--bs-scroll-height: 100px;，展开后的菜单项总高度远大于100px，就算去掉overflow裁剪，也会被限制高度出现滚动条，无法完整展示。
• Sticky失效原因：手动写的.sticky类逻辑兼容性差，且父容器#navbar的overflow: hidden属性会直接破坏sticky定位的生效规则，导致吸顶功能异常。

1. 修正HTML结构错误 #

把logo位置的错误代码修正，去掉多余的</a>，如果logo需要加跳转链接就补全开头a标签，不需要就直接保留img标签即可：

<!-- 错误原代码 -->
<img class="navbar-brand" src="[[++url_images]]/logos/logo.jpg" alt="Your image is not loading"></a>

<!-- 修正后（无跳转链接版本） -->
<img class="navbar-brand" src="[[++url_images]]/logos/logo.jpg" alt="Your image is not loading">

同时去掉折叠容器上写死的滚动高度限制，把导航列表上的内联样式style="--bs-scroll-height: 100px;"删除，或者把值改到足够大（比如280px）适配移动端菜单高度。

2. 移除/调整冲突的自定义CSS #

• 修改#navbar的溢出和高度规则，保证菜单不被裁剪：

#navbar {
  /* 删除原有的overflow: hidden;和height: 10vh;两行 */
  overflow: visible;
  padding: 0;
  background-color: #1e4785;
}

• 缩小全局列表样式的作用范围，不要影响导航组件：

/* 把原来作用于所有li的样式，限定到正文内容区域 */
.content li {
  display: inline;
  margin-left: 100px;
  align-items: center;
}

• 删除导航链接上的浮动和固定高度，避免和Flex布局冲突：

#navbar a {
  /* 删除原有的float: left;和height: 3vh;两行 */
  display: block;
  color: #f89830;
  text-align: center;
  text-decoration: none;
}

3. 修复Sticky吸顶功能 #

不需要自己写JS监听滚动加类，直接用Bootstrap自带的sticky-top类即可，给<nav>标签加上这个类：

<nav id="navbar" class="navbar navbar-expand-lg sticky-top">

然后删掉你自己写的.sticky相关CSS和对应的滚动监听JS代码，Bootstrap自带的sticky-top已经做了跨端兼容，不会受布局影响失效。

4. 移动端样式适配 #

移动端断点下给展开的折叠菜单加独立背景和定位，避免和页面内容重叠：

@media print, screen and (max-width: 63.99875em) {
  .navbar-collapse {
    background-color: #1e4785;
    padding: 1rem;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 999;
  }
  #navbar a {
    font-size: 12px;
    margin-top: 0;
    padding: 0.5rem 0;
  }
}

改完以上内容后，移动端菜单展开、下拉菜单显示、sticky吸顶三个功能都会恢复正常，不需要额外排查其他自定义CSS。

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