Bootstrap 4 导航栏toggler组件点击后无法展开问题求助

导致该问题的核心原因有两个，对应修复方案如下：

• 依赖引入不完整
  Bootstrap 4的折叠交互功能必须依赖jQuery、Popper.js、Bootstrap 4自身的JS三个资源，需要按「jQuery → Popper.js → Bootstrap4 JS」的顺序在页面末尾</body>标签前引入，仅引入Bootstrap CSS文件只能加载样式，无法触发交互效果。
• CSS元素遮挡
  你设置的.navbar-brand使用了position: absolute+width: 97.5vw属性，该元素会覆盖在toggler按钮上方，导致点击按钮时实际命中的是navbar-brand的区域，无法触发折叠事件。可修改CSS如下，保留logo居中效果的同时避免遮挡：

.navbar {
  min-height: 125px;
  display: flex;
  align-items: flex-start;
  padding-top: 13px;
}

.navbar-nav {
  padding: 80px 0 0;
}

.nav-link {
  font-size: small;
  font-weight: 900;
  text-align: center;
}

.nav-item {
  padding: 0 15px;
}

.navbar-brand {
  margin: 0 auto;
}

.navbar-brand img {
  display: block;
  margin: 0 auto;
}

.navbar-toggler {
  z-index: 10;
  margin-top: 10px;
}

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