为什么我的导航选项卡不适用于带有角度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>