Bootstrap 4导航栏下拉菜单显示异常问题求助

嘿，我看了你的导航栏代码，Bootstrap 4的下拉菜单没法正常展开，大概率是缺少了必需的依赖库——Bootstrap 4的下拉组件依赖jQuery和Popper.js才能触发交互，光引入Bootstrap的CSS和JS是不够的，这是很多人刚用Bootstrap 4时容易踩的坑！

问题根源 #

Bootstrap 4的JavaScript组件（包括下拉菜单）依赖以下两个库：

• jQuery（必须在Bootstrap JS之前引入）
• Popper.js（用于处理下拉菜单的定位，同样要在Bootstrap JS之前引入）

你的代码里应该没正确引入这两个库，导致下拉的触发逻辑无法执行。另外，我注意到你代码里的下拉链接类名写了dropdow...，应该是dropdown-item，这个小笔误也要修正哦。

修复步骤 #

1. 按正确顺序引入依赖库：
   • 先引入jQuery
   • 再引入Popper.js
   • 最后引入Bootstrap 4的JS文件
2. 修正下拉菜单链接的类名，确保是dropdown-item

修正后的完整示例代码 #

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<!-- 引入依赖库：jQuery → Popper.js → Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

<!-- 导航栏代码 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span>admin</span>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a href="/menu/changepassword" class="dropdown-item">修改密码</a>
          <a href="/menu/logout" class="dropdown-item">退出登录</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

这样调整后，下拉菜单应该就能正常点击展开了。如果还是有问题，可以检查一下浏览器控制台有没有报错，看看是不是依赖库的版本不兼容或者引入路径有误~

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