0

我已经通过npm install --save 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 标记。

4

1 回答 1

1

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

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

wheredisplay: contents导致元素的子元素看起来好像是元素父元素的直接子元素，忽略元素本身

于 2020-04-03T21:22:21.040 回答