Bootstrap 5.2下拉菜单失效问题：升级自4.6后无法展开

你的问题核心是Bootstrap 5.x对数据属性命名规则做了变更，所有原Bootstrap 4.x中的data-toggle、data-target这类属性，在5.x版本里需要加上bs-前缀，改成data-bs-toggle、data-bs-target。另外还有两个小问题需要修正：

• Bootstrap 5.x已经移除了navbar-default类，换成了navbar-light或navbar-dark配合背景色类（比如bg-light），否则导航栏样式会异常。
• 你提到把mr-auto改成ml-auto，但结合justify-content-end，这里应该用ms-auto（Bootstrap 5.x用ms/me代替了ml/mr）。

修改后的完整代码如下：

<script defer src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css'>

<nav class='navbar navbar-light bg-light navbar-expand-lg'>
  <div class='collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>
    <ul class='navbar-nav ms-auto'>
      <li class='nav-item dropdown'>
        <a class='nav-link dropdown-toggle' href='#' id='navbarDropdownAbout' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>About</a>
        <div class='dropdown-menu' aria-labelledby='navbarDropdownAbout'>
          <span class='nav-link' data-bs-toggle='modal' data-bs-target='#CUserAbout'>This Site</span>
          <span class='nav-link' data-bs-toggle='modal' data-bs-target='#CUabout'>Utils</span>
          <span class='nav-link' data-bs-toggle='modal' data-bs-target='#CUlicense'>License</span>
          <a class='nav-link' href="https://wikipedia.org/" target="_blank">Wiki</a>
        </div>
      </li>
      <li class='nav-item'> <span class='nav-link' onclick="function('charts.txt', true);">Home</span> </li>
    </ul>
  </div>
</nav>

关键修改点说明：

1. 所有data-toggle替换为data-bs-toggle，data-target替换为data-bs-target——这是下拉菜单和模态框能正常触发的核心。
2. 移除navbar-default，添加navbar-light bg-light适配Bootstrap 5.x的导航栏样式体系。
3. 将mr-auto替换为ms-auto，符合Bootstrap 5.x的间距类命名规范（ms=margin-start，me=margin-end，替代原ml/mr）。

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