为什么我的nav选项卡不适用于带有角度4的bootstrap 4

103

索纳蒙达

我正在尝试将Bootstrap 4的选项卡与angular 4一起使用，我希望它的外观和行为如下所示：在此处输入链接描述

但是我的页面看起来像这样。

以下是我的代码：

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>

没有错误，但仍看不到选项卡。我不确定为什么吗？

克里希纳·拉索（Krishna Rathore）

您可以使用此模板

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。