Моя панель навигации Bootstrap выглядит как таблица, если я использую ссылку Bootstrap

Question

У меня проблема с панелью навигации: если я использую ссылку stylesheet из начальной загрузки

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Моя панель навигации выглядит следующим образом: Вам нужно как минимум 10 репутации, чтобы публиковать изображения, поэтому я должен опубликовать это так: https://i.imgur.com/dANnzzG.png

на каждом роутереСсылка.

Мой компонент панели навигации выглядит следующим образом:

        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav">
                    <li>
                            <a routerLinkActive="active" routerLink="">Home</a>
                        </li>
                <li>
                    <a routerLinkActive="active" routerLink="list">List</a>
                </li>
                <li>
                    <a routerLinkActive="active" routerLink="create">Create</a>
                </li>
                <li>
                    <a routerLinkActive="active" routerLink="calendar">Calendar</a>
                </li>
            </ul>
        </nav>
        <div>
        <section>
        <router-outlet></router-outlet>
    </section>
    </div>

Как я могу это исправить? Спасибо!

Answer 1

Вы можете написать так.

<section class="sidebar">
<div class="collapse navbar-collapse m-0 ad-user sidebar-form" id="navbar-collapse">
            <ul class="nav navbar-nav">             
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <div id="profile_view_image"></div>
                        <span class="hidden-xs">{{ data }}</span>
                    </a>
                    <ul class="dropdown-menu" style="width: 160px; !important">
                        <li><a href="{{ route('page') }}"><i class="fa fa-user"></i> </a></li>
                        <li><a href="{{ route('page2') }}"><i class="fa fa-key"></i> </a></li>
                        <form id="logout-form" action="{{ route('page') }}" method="POST" style="display: none;">
                        </form> -->
                    </ul>
                </li>
            </ul>
        </div>
</section>