引导折叠导航栏折叠不适用于角度 8

Question

我尝试在我的 Angular 8 项目中使用 bootstrap collapse navbar-collapse 功能，但编译后它没有显示正确的输出。 我已经安装： bootstrap - 4.3.1 并对 angular.json 文件进行更改。 jquery 也安装在我的 Angular 项目中 这是我尝试实现的引导程序 sn-p。

header.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">Recipe Book</a>
    </div>
<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="#">Shoppimg List</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">

        <li class="dropdown">
          <a href="#" class="dropdown-toggle">Manage</a>
          <ul class="dropdown-menu">
            <li><a href="#">Saving Data</a></li>
            <li><a href="#">Fetching Data</a></li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

需要指导

Answer 1

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">Recipe Book</a>
    </div>

    <ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">Recipes</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Shopping List</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="navbardrop">Manage</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Save Data</a>
                <a href="#" class="dropdown-item">Fatch Data</a>
            </div>
        </li>
    </ul>
</div>