导航栏未出现在结果中?

问题描述 投票:0回答:1

我正在学习 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 组件。也不起作用,在终端中都给出了错误

应该是这样的:

angular bootstrap-modal navbar
1个回答
0
投票

您错过了

.navbar-expand
课程。

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

导航栏需要用

.navbar
包裹
.navbar-expand{-sm|-md|-lg|-xl|-xxl}
,以实现响应式折叠和配色方案类。

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

  1. popper.min.jsbootstrap.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

© www.soinside.com 2019 - 2024. All rights reserved.