Блог

Я следую курсу Udemy по Angular, и у меня возникают проблемы с nav bar этим кодом

 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">Recipe Book</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#" >Recipes</a></li>
        <li><a href="#">Shopping List</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" role="button">Manage <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Save Data</a></li>
            <li><a href="#">Fetch Data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
 

чего я пытаюсь добиться, так это этого снимка экрана
но то, что я получаю, — это
скриншот2

я добавил кнопку с классом btn-primary , чтобы проверить, работает ли начальная загрузка

когда я проверил, я обнаружил, что у collapse нет отображения, поэтому я удалил класс collapse и получил этот скриншот3

я попытался скопировать код заголовка из файлов проекта, которые я загрузил, и получил тот же неправильный результат

в чем может быть проблема и каково ее решение? Спасибо

Во-первых, если этот учебник немного устарел, обязательно установите правильную версию начальной загрузки, например «npm i bootstrap@v4.4.1»

Во-вторых, попробуйте следовать примерам шаблонов навигации начальной загрузки https://getbootstrap.com/docs/4.0/examples/navbars/

Я предполагаю, что в вашем случае вы забыли определить, при каком размере экрана должна расширяться навигация… например, добавьте «navbar-expand-md» в свойство класса навигации, и появится меню

 <nav class="navbar navbar-expand-md navbar-default">