引导图像和元素在使用角时不呈现

Question

我正在使用的最新版本的引导和角，并采取了一个在线课程在角目前。

我是以字母的例子，但有一个不同的显示在教员的视频和什么显示在我的浏览器。例如，使用以下代码：

<ul class="nav nav-pills">
<li [class.active]="viewMode == 'map'"><a (click)="viewMode = 'map'">Map View</a></li>
<li [class.active]="viewMode == 'list'"><a (click)="viewMode = 'list'">List View</a></li>
</ul>
<div [ngSwitch]="viewMode">
<div *ngSwitchCase="'map'">Map View Content</div>
<div *ngSwitchCase="'list'">List View Content</div>
<div *ngSwitchDefault>Otherwise</div>
</div>

我得到的输出是：

​

​

当教师输入他得到的代码时：

​

​

我是不是下载错了Bootstrap的包？据我所知，“导航丸”这门课应该让它以教员的方式展示出来。

下面是添加了引导模式之后的HTML外观：

​

​

Answer 1

在您的示例中，添加以下类

nav- li元素的项

链接到a标记

如本例所示：

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Answer 2

使用以下角靴带命令将angular-cli架构添加到项目中：

ng add @ng-bootstrap/ng-bootstrap