我正在学习 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 组件。也不起作用,在终端中都给出了错误
您错过了
.navbar-expand
课程。
导航栏需要用
包裹.navbar
,以实现响应式折叠和配色方案类。.navbar-expand{-sm|-md|-lg|-xl|-xxl}
此外,您应该需要一个按钮切换来显示/隐藏可折叠部分。确保您已导入:
popper.min.js 和 bootstrap.min.js 文件
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>