Question

我正在处理以下示例：

在app.component.html中，我正在修改：

<ul class="nav nav-tabs">

到

<ul class="nav nav-pills">

所以，现在标签看起来像药。

然后我将导航栏复制到另一个示例中：

Testing example

导航栏的外观与原始示例不同。两个示例都运行相同的Bootstrap版本。虽然第二个示例不包括路由器，但我不确定它是否有任何作用。

有人可以帮助我了解我所缺少的吗？

谢谢

Answer 1

我认为您安装了bootstrap，jQuery等，但未影响到您的应用程序，因此，将CSS和js的引用添加到“ Angular.json”->构建数组->中，如下所示：

"styles": [
          "src/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"]

Answer 2

尝试在index.html中包含类似内容

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

您需要导航栏的不同结构。 nav-item和nav-link很重要

<ul class="nav nav-pills">
        <li role="presentation" class="nav-item"><a routerLink="/" routerLinkActive="active" class="nav-link">Home</a></li>
        <li role="presentation" class="nav-item"><a routerLink="/" routerLinkActive="active" class="nav-link">Second</a></li>
</ul>

也许就是这样

Bootstrap导航栏与药丸和Angular

2 个答案: