Bootstrap下拉菜单超出屏幕及createPopper错误修复求助

1. 解决i.createPopper is not a function错误 #

这个错误源于重复/不兼容的Popper依赖引入：

• Bootstrap 4+的bootstrap.bundle.min.js已经内置了对应版本的Popper（Bootstrap5用@popperjs/core，Bootstrap4用旧版Popper），无需单独引入popper.js
• 同时引入bootstrap.min.js和bootstrap.bundle.min.js会导致代码冲突，后者已包含前者全部内容

修改angular.json的scripts配置，只保留必要文件：

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
  "./node_modules/chart.js/dist/Chart.min.js"
]

2. 修复下拉菜单溢出屏幕的问题 #

问题根源：

• 下拉组件未正确对齐导航栏右侧，且HTML结构不符合Bootstrap规范（ul.dropdown-menu的直接子元素必须是li，不能直接放a）
• 使用了非标准的对齐类dropdown-menu-sm-right

修正步骤：

• 将下拉组件包裹在navbar-nav ms-auto（Bootstrap5）或navbar-nav ml-auto（Bootstrap4）中，确保其固定在导航栏右侧
• 用标准类dropdown-menu-end（Bootstrap5）或dropdown-menu-right（Bootstrap4）替代dropdown-menu-sm-right，让下拉菜单贴合屏幕右边缘展开
• 修正HTML结构：把a.dropdown-item放在li标签内，符合列表元素规范
• Bootstrap5需将data-toggle改为data-bs-toggle，否则下拉功能无法触发

修改后的完整代码 #

HTML：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <div style="margin-bottom: 0px;" class="navbar-header justify-content-start">
      <a class="navbar-brand" href="#">
        <img width="100" src="assets/Acc_logo.png" alt="logo">
      </a>
    </div>

    <!-- 右对齐导航项容器 -->
    <ul class="navbar-nav ms-auto">
      <li class="nav-item dropdown">
        <button class="btn btn-secondary dropdown-toggle" 
                data-bs-toggle="dropdown" 
                type="button" 
                aria-haspopup="true" 
                id="dropdownMenuButton" 
                aria-expanded="false">
          <div class="divIcom"></div>
          <div class="divIcom"></div>
          <div class="divIcom"></div>
        </button>
        <!-- 向右对齐的下拉菜单 -->
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
    </ul>
  </div> 
</nav>

CSS（保留原有样式即可）：

li {
    list-style-type: none;
}

.divIcom {
    width: 30px;
    height: 3px;
    background-color: gray;
    margin: 6px 0;
}

.dropdown-toggle::after {
    display:none;
}

额外适配说明 #

• 若使用Bootstrap4，需将ms-auto改为ml-auto，dropdown-menu-end改为dropdown-menu-right，data-bs-toggle改回data-toggle
• 修改完成后重启Angular开发服务器，确保依赖生效

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