Bootstrap 3网站头部菜单在中等屏幕宽度下无法正常折叠

这问题我做项目时也碰到过类似情况——明明代码、依赖库都和正常站点一致，偏偏中等屏幕下的菜单就是不肯折叠。咱们从几个核心方向排查：

1. 先查响应式断点的CSS规则 #

大概率是平板对应的媒体查询里，菜单的折叠逻辑没写对。你说两个站点CSS一致，但说不定这个站点的CSS缓存了旧版本，或者有隐性的样式覆盖：

• 打开浏览器开发者工具，切换到平板尺寸（比如768px~991px），查看.nav-main-collapse元素的display属性，是不是被设置成了block/flex这种展开状态？
• 给平板断点补上强制折叠的规则：

  /* 平板尺寸（768px-991px）下折叠菜单 */
  @media (min-width: 768px) and (max-width: 991px) {
    .nav-main-collapse {
      display: none !important;
    }
    /* 同时确保汉堡按钮显示 */
    .btn-mobile {
      display: block !important;
    }
  }
  

2. 检查Bootstrap导航的核心类名 #

你代码里的navbar-toggleable-md是关键——在Bootstrap 4里，这个类控制菜单在md断点（768px）及以上展开，以下折叠。如果想让平板尺寸也折叠，得把这个类换成navbar-expand-lg：

<!-- 原来的代码 -->
<div id="header" class="navbar-toggleable-md sticky clearfix">
<!-- 修改后 -->
<div id="header" class="navbar-expand-lg sticky clearfix">

这样菜单只会在lg断点（992px）及以上的桌面尺寸展开，平板和移动端都会自动折叠成汉堡按钮。

3. 验证DOM绑定与JS初始化 #

• 检查汉堡按钮的data-target=".nav-main-collapse"有没有写错，确保和菜单容器的类名完全匹配，有没有其他元素误用了nav-main-collapse类导致冲突；
• 打开控制台，手动执行$('.nav-main-collapse').collapse('hide')，如果平板尺寸下菜单能折叠，说明是JS初始化的问题——看看scripts.js里有没有针对这个菜单的特殊逻辑，比如判断条件写错了，导致没触发折叠初始化。

4. 清空浏览器缓存 #

别小看这个！有时候新部署的站点会缓存旧的CSS/JS文件，你改了代码但浏览器还是读旧的。强制刷新（Ctrl+Shift+R）或者清空缓存后再测试，很多时候问题就出在这。

我之前碰到的情况就是客户站点缓存了旧的Bootstrap CSS，导致断点逻辑没生效，清空缓存+调整navbar-expand-*类就解决了，你可以按这个顺序排查试试。

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