应使用 @ng-bootstrap/ng-bootstrap 替代原生 Bootstrap JS，它兼容 Angular 变更检测与生命周期，需手动安装、引入 Bootstrap CSS 和 bootstrap-icons 字体文件，并避免 jQuery 冲突。

别直接用 Bootstrap 原生 JS 插件 —— 它和 Angular 的变更检测、组件生命周期、DOM 管理机制天然冲突，95% 的“样式有了但下拉/模态框不响应”问题都源于此。

用 @ng-bootstrap/ng-bootstrap 替代原生 Bootstrap JS

这是现代 Angular 项目（v14+）唯一推荐的集成路径。它不依赖 jQuery，所有组件（NgbModal、NgbDropdown、NgbTooltip）都通过 @Input/@Output 和 Angular 生态原生对接。

• 先装依赖：npm install @ng-bootstrap/ng-bootstrap（ng add @ng-bootstrap/ng-bootstrap 在 v17+ 经常失败，手动装更稳）
• 确保已安装 @angular/localize：ng add @angular/localize（哪怕不用多语言，它也是 ng-bootstrap 的 peer 依赖）
• 在根模块（AppModule）中导入：NgBootstrapModule.forRoot()；若用 Standalone Components，则改用 provideNgbModal() 等函数注入
• 别在模板里写
  —— 这是原生 Bootstrap 写法，Angular 里必须用 this.modalService.open(MyComponent)

  Bootstrap CSS 必须单独引入，且只引 bootstrap.min.css

  @ng-bootstrap 只提供逻辑，不带样式。你得自己把 Bootstrap 的 CSS 加进构建流程，否则按钮没圆角、下拉菜单无背景。

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载

  • 在 angular.json 的 projects..architect.build.options.styles 数组里加一行："node_modules/bootstrap/dist/css/bootstrap.min.css"
  • 绝对不要引入 bootstrap.bundle.min.js 或任何含 jQuery 的 JS 文件 —— 它会和 @ng-bootstrap 报冲突，控制台出现 Cannot read property 'top' of undefined 就是典型症状
  • 检查是否被其他 CSS 框架（如 Tailwind）重置规则覆盖：比如 .btn 类被 all: unset 干掉了，这时要调高 Bootstrap CSS 的加载顺序或加 !important（临时调试用）

  bootstrap-icons 要配对引入字体文件路径

  只运行 npm install bootstrap-icons 不会生效 —— Angular 构建系统根本不知道该加载哪个 CSS 文件。

  • 安装命令：npm install bootstrap-icons --save
  • 在 angular.json 的同个 styles 数组里，再加一行："node_modules/bootstrap-icons/font/bootstrap-icons.css"
  • 图标使用示例：，注意类名前缀是 bi，不是 glyphicon 或 fa
  • 如果图标显示为方块，大概率是字体文件没加载成功，检查浏览器 Network 面板里有没有 404 的 bootstrap-icons.woff2

  最容易被忽略的一点：Angular 的 ViewEncapsulation 默认是 Emulated，而 Bootstrap CSS 是全局作用域的。如果你在某个组件里写了 .btn { color: red }，它不会覆盖 bootstrap.min.css 里的 .btn，因为后者优先级更高 —— 这不是 bug，是设计使然，需要靠 CSS specificity 或 ::ng-deep（不推荐）来处理定制样式。