Bootstrap4页面缩放后导航toggle点击不显示链接问题求助

核心失效原因 #

• data属性版本不匹配：你当前使用了Bootstrap5专属的data-bs-*前缀属性，Bootstrap4的折叠交互需要使用不带bs前缀的data-*属性，这是点击无反应的最主要原因
• 无障碍属性不匹配：按钮的aria-controls属性值需要和折叠容器的id保持一致，当前写的navbarTogglerDemo02与实际折叠容器idnavbar不符，虽不影响功能但不符合无障碍规范
• 依赖检查：确认页面已按以下顺序引入Bootstrap4所需的JS依赖，漏引或顺序错误都会导致交互失效：
  1. jQuery（版本要求≥1.9.1）
  2. Popper.js
  3. Bootstrap4 本体JS文件

修正后的汉堡按钮代码 #

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

可选样式优化 #

你当前导航列表的行内样式存在多处无效属性，建议调整避免样式异常：

1. 原text: white为无效属性，改为color: #fff实现白色文字效果
2. 原margin-right: 50缺少单位，改为margin-right: 50px
3. 原margin-left:500px在小屏展开时会导致内容溢出，建议改为响应式写法，仅在大屏下生效：

@media (min-width: 992px) {
    .navbar-nav {
        margin-left: 500px;
    }
}

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