Невозможно отформатировать bootstrap css с Angular тегами - PullRequest
Новая
       58

Невозможно отформатировать bootstrap css с Angular тегами

0 голосов
/ 03 апреля 2020

Я добавил bootstrap с помощью команды 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 неправильно форматирует приложение.

Bad Format

против

Good Format

Что я здесь не так делаю? Что мне нужно сделать, чтобы ws- root и теги ws-navigation игнорировались.

1 Ответ

1 голос
/ 04 апреля 2020

Я думаю, вам нужно использовать что-то подобное 

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

, где display: contents заставляет дочерние элементы элемента выглядеть так, как если бы они были прямыми дочерними элементами родительского элемента, игнорируя сам элемент

...