调整浏览器窗口大小时导航菜单toggle按钮无法工作如何解决？

问题排查及解决方案 #

你遇到的导航栏toggle按钮点击无响应问题，核心原因是自定义属性和你使用的框架不匹配：

• 你代码中toggle按钮使用的data-mdb-toggle、data-mdb-target是Material Design for Bootstrap（MDB）框架专属的属性前缀，如果你项目中未正确引入MDB的JS依赖，或是实际使用的是原生Bootstrap框架，框架无法识别对应属性，就会导致点击无响应。

修复方案

1. 如果你使用的是原生Bootstrap 5，直接修改toggle按钮的属性前缀即可：
   将按钮上的data-mdb-toggle替换为data-bs-toggle，data-mdb-target替换为data-bs-target，修改后的代码如下：

<button class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarButtonsExample"
        aria-controls="navbarButtonsExample"
        aria-expanded="false"
        aria-label="Toggle navigation">
    <i class="fas fa-bars"></i>
</button>

2. 如果你确实需要使用MDB框架，请检查项目依赖引入：
   确保已正确引入Popper.js、MDB JS文件，且引入顺序符合要求：先引入MDB CSS，再引入Popper.js，最后引入MDB JS。
3. 你当前代码中折叠容器的idnavbarButtonsExample和target属性指向的id完全一致，不存在拼写错误，无需修改。

内容的提问来源于stack exchange，提问作者Michal Prušák