angular - 为什么我的导航选项卡不适用于 Angular 为 4 的 bootstrap 4

Question

我正在尝试将 bootstrap 4 的选项卡与 angular 4 一起使用我希望它看起来像这样 enter link description here

但是我的页面是这样的。

下面是我的代码:

Angular -cli.json:

"prefix": "app",
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/bootswatch/dist/cosmo/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css"
  ],
  "addons":[
    "../node_modules/font-awesome/font/*.+(otf|eot|svg|ttf|woff|woff2)"
  ],
  "scripts": [
   "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/tether/dist/js/tether.min.js",
   "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

main.componenet.html

<ul class="nav nav-tab">
    <li class="nav-item">  home <i class="fa fa-home"></i></li>
    <li class="nav-item">product</li>
</ul>

没有错误，但仍然看不到标签。我不确定为什么？

Answer 1

你可以使用这个模板

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">home
            <i class="fa fa-home"></i>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Product</a>
    </li>
</ul>