Угловой / Boostrap – Navbar не отображается должным образом

Недавно я добавил Bootstrap 4, jQuery и Popper в свой проект, но проблема в том, что когда я показываю свою веб-страницу, она показывает навигационную панель (как это происходит в компоненте с заголовком): введите описание изображения здесь

Также я добавил в свой angular-cli.json:

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/popper.js/dist/umd/popper.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ], 

Код HTML

  

В вашем навигаторе отсутствуют некоторые classы. Взгляните на следующий код и classы и компоненты, используемые там. Если у вас все еще есть вопросы, не стесняйтесь спрашивать. Но этот пример кода поможет вам разобраться в этой проблеме.

Кроме того, class d-lg-none говорит: «спрячьте это от точки останова, большой и выше. Это то, что вы хотите? Это НЕ то, как должен работать toggler. Bootstrap предназначен для того, чтобы быть мобильным – сначала ! Значение toggler – по умолчанию. Затем вы используете navbar-expand-lg который в основном говорит: «спрячьте переключатель и разверните навигационную панель в горизонтальную сторону от« lg »(= большой) точки останова и далее».

Вот мой пример кода: