Angular4 nav nav-tabs 样式不起作用

Posted 2023-03-05

【中文标题】Angular4 nav nav-tabs 样式不起作用

【英文标题】：Angular4 nav nav-tabs style not working

【发布时间】：2017-12-04 04:20:24

【问题描述】：

我正在使用 Angular4，nav nav-tabs 样式似乎不起作用，我得到的只是如下图所示的无序垂直列表 -

我的标签组件代码是 -

@Component(
selector: 'tabs',
template:`
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
  <li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active" data-toggle="tab">
    <a href="#profile" data-toggle="tab">tab.title</a>
  </li>
</ul>
<ng-content></ng-content>
`,
styleUrls: ['./css/bootstrap.min.css','./css/paper-dashboard.css','./css/themify-icons.css','./css/animate.min.css']
)

当我检查 ul 元素时，它们确实具有如下屏幕截图所示的类 -

对于我正在使用的标签Learning Angular: Creating a tabs component

【问题讨论】：

显然缺少 CSS。你能给我们你的组件的代码吗？

感谢您的及时回复，我已包含组件代码。

所以从styleUrls 属性的外观来看，我假设您有一个文件夹css 在您的组件所在的同一文件夹中，并且该文件夹包含所有需要的样式？

是的，事实上所有其他属于引导程序的样式都在应用，标签内容正在正确显示。

如果你检查它们会发生什么？他们绝对没有课？

【参考方案1】：

styleUrls 字段中引导 css 文件的路径错误。