如何调整navbar响应式断点，使汉堡图标在菜单项重叠前显示

DevOps 小满

2026-9-27

解决方案

你遇到的是Bootstrap 3导航栏默认折叠断点不匹配现有菜单项宽度的问题，默认折叠阈值为768px，新增菜单项后总宽度提前超出导航容器宽度，才会出现菜单项下移重叠的情况，按以下步骤修改即可：

确定适配断点
打开浏览器开发者工具，拖动窗口边缘调整宽度，记录下导航栏菜单项刚好不会发生重叠、换行的最小宽度数值，作为自定义折叠断点。
添加自定义CSS覆盖默认样式
将以下代码加入你的自定义样式文件中，将992px替换为上一步你测得的实际断点值：

/* 自定义导航栏折叠断点 */
@media (max-width: 992px) {
    /* 强制显示汉堡折叠按钮 */
    #navigation .navbar-header {
        float: none;
    }
    #navigation .navbar-toggle {
        display: block;
    }
    #navigation .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    #navigation .navbar-collapse.collapse {
        display: none!important;
    }
    #navigation .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    #navigation .navbar-nav>li {
        float: none;
    }
    #navigation .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /* 适配你自定义的导航容器类 */
    #navigation .navbar-middle-container, 
    #navigation .navbar-right-container {
        float: none;
        width: 100%;
    }
}
/* 保证点击汉堡后菜单正常展开 */
#navigation .navbar-collapse.collapse.in { 
    display: block!important;
}