导航栏未出现在结果中？

Question

我正在学习 Angular 15.0.0，我遇到了一个问题

导航栏没有出现，为什么除了食谱书之外什么也没有出现

代码

<nav class = "navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class ="navbar-brand">Racipe 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="#">saving data</a></li>
            <li><a href="#">fetch data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

它看起来是这样的：

我尝试降级 Bootstrap 但不起作用，并尝试使用

ng-bootstrap

包来包含基于 Angular 的 Bootstrap 组件。也不起作用，在终端中都给出了错误

应该是这样的：

Answer 1

您错过了

.navbar-expand

课程。

导航栏 - 它是如何工作的 |引导程序 5

导航栏需要用

.navbar

包裹

.navbar-expand{-sm|-md|-lg|-xl|-xxl}

，以实现响应式折叠和配色方案类。

此外，您应该需要一个按钮切换来显示/隐藏可折叠部分。确保您已导入：

1. popper.min.js 和 bootstrap.min.js 文件

2. bootstrap.bundle.min.js

为了让折叠功能发挥作用。

参考：Bootstrap 5 下拉菜单在 Angular 12 上不起作用

完整代码：

<nav class="navbar navbar-default navbar-expand-lg">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">Racipe Book!</a>
    </div>

    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="nav navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link" href="#">Recipes</a></li>
        <li class="nav-item">
          <a class="nav-link" href="#">Shopping list</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a
            href="#"
            class="dropdown-toggle"
            role="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarManageContent"
          >
            Manage <span class="caret"></span
          ></a>
          <ul class="dropdown-menu" id="navbarManageContent">
            <li class="nav-item">
              <a class="nav-link" href="#">saving data</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">fetch data</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

演示@StackBlitz