Я не могу заставить работать раскрывающееся меню. Всякий раз, когда я нажимаю ссылку «Профиль», чтобы раскрыть список и просмотреть параметры «Учетная запись» и «Выход из системы», меня выводят из моего приложения angular.
<nav class="navbar navbar-expand-lg bg-dark navbar-fixed-top">
<a class="navbar-brand text-white" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" routerLink="/dashboard">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" routerLink="/dashboard">Documents</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Profile
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" routerLink="/account">Account</a>
<a class="dropdown-item" routerLink="/account" (click)="authService.SignOut()">Log Out</a>
</ul>
</li>
</ul>
</div>
</nav>
ОБНОВЛЕНИЕ Я знаю, что может отсутствовать последовательность включения .js или .css, поэтому я вставляю содержимое моих angular.json и style.css.
< Сильный > styles.css
@import '~bootstrap/dist/css/bootstrap.min.css';
@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";
< Сильный > angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/font-awesome/css/font-awesome.css",
"src/custom.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
1 ответ
Приведенный выше фрагмент кода написан на чистом HTML и Bootstrap. Я запустил его, как вы предоставили, и он работает, как ожидалось. Раскрывающийся список работает как на рабочем столе, так и на мобильный вид. Вы можете настроить цвет значка мобильного гамбургера, чтобы он был невидимым, но в остальном работал. Я включил несколько скриншотов для вашей справки. Я предполагаю, что проблема, с которой вы столкнулись, связана с настройкой Angular, а не с Bootstrap и HTML.
Похожие вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].