无法使用 Angular 标签格式化 bootstrap css

Question

我已经通过 npm install --save bootstrap 命令添加了 bootstrap 并且我有以下 Angular 组件： navigation.component.html

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
            <li class="nav-header">
                <div class="dropdown profile-element">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <span class="block m-t-xs font-bold">Example user</span>
                        <span class="text-muted text-xs block">menu <b class="caret"></b></span>
                    </a>
                    <ul class="dropdown-menu animated fadeInRight m-t-xs">
                        <li><a class="dropdown-item" href="login.html">Logout</a></li>
                    </ul>
                </div>
                <div class="logo-element">
                    IN+
                </div>
            </li>
            <li class="active">
                <a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">Main view</span></a>
            </li>
            <li>
                <a href="minor.html"><i class="fa fa-th-large"></i> <span class="nav-label">Minor view</span> </a>
            </li>
        </ul>

    </div>
</nav>

当我启动应用程序时，源显示如下：

<body>
    <div id="wrapper">
        <ws-root _nghost-pqf-c14="" ng-version="9.0.0">
            <ws-navigation _ngcontent-pqf-c14=""> <!--- ISSUE HERE --->
                <nav role="navigation" class="navbar-default navbar-static-side">

由于 ws-root 和 ws-navigation 标签位于 div#id 标签之间，CSS 无法正确格式化应用程序。

对

我在这里做错了什么？我需要做什么才能忽略 ws-root 和 ws-navigation 标签。

Answer 1

我认为你需要使用类似的东西

ws-root,ws-navigation{
  display:contents;
}

其中 display: contents 使元素的子元素看起来好像是元素父元素的直接子元素，忽略元素本身

无法使用 Angular 标签格式化 bootstrap css

Unable to format bootstrap css with Angular tags

css

bootstrap-4

angular

nrwl-nx