如何在 Angular 中正确显示 Bootstrap？

Question

我现在正在学习 Angular。在本教程中，我应该使用 Bootstrap：

<ul class="nav nav-pills">
    <li class="active"><a href="">Map View</a></li>
    <li><a href=""></a>List View</li>
</ul>
<div>
    <div>Map View Content</div>
</div> 

为了输出这个：

相反，我得到了这个：

我可以看到 Bootstrap 不起作用。所以我检查了是否安装了 Bootstrap 和 jQuery，它们是（都在 node_modules 文件夹中）：

我检查了我是否正确导入。我尝试了两种方法。首先，我在styles.css 上导入Bootstrap 是这样的：

@import "~bootstrap/dist/css/bootstrap.css"

它没有工作。所以我尝试了另一种方法，在 angular.json 文件中添加 Bootstrap 和 jQuery，如下所示：

"styles": [
      "styles.css",
      "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
      "./node_modules/jquery/dist/jquery.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

我的问题是：是否有任何我可能遗漏的额外步骤？我已经查看了很多资料，似乎我的一切都是正确的。有没有更好的选择来让 Bootstrap 正确显示？我真的很困惑，如果能得到任何帮助，我将不胜感激。谢谢！

Answer 1

尝试删除开头的“./”：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]