Bootstrap 4导航栏汉堡菜单可展开但无法折叠问题求助

嘿，我看了你的导航栏代码，找到汉堡菜单只能展开不能折叠的问题啦！主要是布局类使用错误导致折叠组件的交互逻辑被干扰，还有几处小细节需要修正，下面给你详细说：

问题根源 #

1. 错误的布局类：你给左侧导航的<ul>加了ml-auto，这个类会把元素推到容器最右侧，直接打乱了导航的布局结构，同时干扰了Bootstrap折叠组件的事件绑定，导致菜单只能展开不能收起。
2. 无效的HTML属性：汉堡按钮里的aria-label包含了未解析的Blade模板代码{{ __('Toggle navigation') }}，虽然不直接影响功能，但会导致HTML结构无效。
3. 空链接占位：右侧导航的<a>标签是空的，虽然不影响折叠，但也需要补充完整。

修复后的完整代码 #

<head> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <style>
        .nav-font {
            font-family: 'Poppins', sans-serif;
        }
    </style>
</head> 
<body> 
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm nav-font"> 
    <div class="container"> 
        <!-- Logo 居左：添加navbar-brand类确保对齐 -->
        <a href="#" class="navbar-brand p-0"> 
            <img src="/storage/img/msprojectlogo.png" style="width:30%;"> 
        </a> 
        <!-- 汉堡按钮：修正aria-label为纯文本 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
            <span class="navbar-toggler-icon"></span> 
        </button> 
        <!-- 折叠容器：移除多余的justify-content-md-center，改用ul的类控制布局 -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
            <!-- 中间导航项：用mx-auto让整个ul居中 -->
            <ul class="navbar-nav mx-auto"> 
                <li class="nav-item p-1 pl-4"><a class="nav-link" href="/">Home</a></li> 
                <li class="nav-item p-1 pl-4"><a class="nav-link" href="/about">About</a></li> 
                <li class="nav-item p-1 pl-4"><a class="nav-link" href="/services">Services</a></li> 
                <li class="nav-item p-1 pl-4"><a class="nav-link" href="/posts">Blog</a></li> 
            </ul> 
            <!-- 右侧导航：用ml-auto推到最右侧 -->
            <ul class="navbar-nav ml-auto"> 
                <li class="nav-item p-1 pl-4"> 
                    <a class="nav-link" href="/login">Login</a> 
                </li> 
                <li class="nav-item p-1 pl-4"> 
                    <a class="nav-link" href="/register">Register</a> 
                </li> 
            </ul> 
        </div> 
    </div> 
</nav>
</body>

关键修改说明 #

• 布局调整：把左侧导航的ml-auto换成mx-auto，这样整个导航列表会在容器中水平居中；右侧导航保留ml-auto，确保它被推到最右侧，完美实现你要的Logo左、导航中、登录右的布局。
• HTML修正：把汉堡按钮的aria-label改成纯文本，避免无效的模板代码残留。
• Logo优化：给Logo的链接添加navbar-brand p-0类，让它和导航栏的高度对齐更协调。
• 补充链接：填充了右侧导航的空链接，你可以根据实际需求修改href和文本内容。

这样修改后，移动端的汉堡菜单就能正常展开和折叠了，桌面端的布局也完全符合你的需求～

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