Bootstrap 5 两行可折叠导航栏优化及Bug修复咨询

问题根源 #

你当前的实现存在两个核心问题：

• 重复定义两套导航菜单，冗余且维护成本高
• 自定义JS修改visibility属性，破坏了Bootstrap折叠组件的原生响应式逻辑，导致窗口尺寸变化时折叠菜单无法自动收起

Bootstrap 5的折叠组件已内置断点触发机制，无需额外JS控制，仅通过原生类即可实现两行导航的响应式切换。

标准实现代码 #

以下是符合Bootstrap规范的实现，无需重复菜单，自动修复窗口调整时的折叠Bug：

<header>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark container flex-column">
        <!-- 第一行：Logo、搜索框、折叠按钮 -->
        <div class="w-100 d-flex justify-content-between align-items-center">
            <a href="#" class="navbar-brand">My LOGO HERE</a>
            
            <form class="d-flex mx-3">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search">
                    <button type="button" class="btn btn-secondary"><i class="fas fa-search"></i></button>
                </div>
            </form>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>

        <!-- 第二行：桌面端直接显示，移动端隐藏；折叠面板：移动端显示，桌面端隐藏 -->
        <div class="collapse navbar-collapse w-100" id="navbarCollapse">
            <div class="navbar-nav d-md-flex w-100 justify-content-between">
                <div class="nav-group">
                    <a href="#" class="nav-item nav-link active">Home</a>
                    <a href="#" class="nav-item nav-link">Categories</a>
                    <a href="#" class="nav-item nav-link">Tags</a>
                    <a href="#" class="nav-item nav-link">Contact Us</a>
                </div>
                <div class="nav-group">
                    <a href="#" class="nav-item nav-link"><i class="fa-solid fa-user"></i> Sign Up</a>
                    <a href="#" class="nav-item nav-link"><i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login</a>
                </div>
            </div>
        </div>
    </nav>
</header>

关键优化点 #

1. 移除冗余菜单：仅保留一套导航内容，通过Bootstrap响应式类控制不同屏幕的显示逻辑
2. 原生折叠逻辑：navbar-expand-md会在屏幕宽度≥768px时自动展开折叠面板，无需自定义JS，彻底解决窗口调整时菜单不收起的Bug
3. Flex布局优化：通过w-100、justify-content-between等类实现两行导航的对齐效果，保持视觉一致性
4. 移除自定义JS：完全依赖Bootstrap原生组件，避免JS冲突和不必要的DOM操作

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