我正在使用 Bootstrap 5 并创建了一个导航栏,我希望它在折叠时切换并在单击时显示导航栏。当我调整浏览器大小时,会出现切换器图标,但当我点击它时,它不会显示我的导航栏。我遵循了这个论坛上的人向与我有类似问题的人提供的每一条建议。我已经通过 npm 安装了 JQquery 和 Bootstrap 5 并将它们添加到我的 angular.json 文件的 scripts:[] 部分,但它仍然不起作用。
没有什么是我没试过的。我将数据切换从 data-toggle=""
更改为 data-bs-toggle=""
,添加了 aria-controls、id、data-target 或 data-bs-target,但它仍然不起作用。
我的代码如下:
<!-- Navbar-->
<nav
class="
navbar navbar-transparent navbar-color-on-scroll
fixed-top
navbar-expand-lg
"
color-on-scroll="100"
id="sectionsNav"
>
<div class="container">
<div class="navbar-translate">
<a routerLink="#" class="navbar-brand"
><img
src="../../../assets/img/comgreen.png"
style="width: 50px; height: 50px;"
alt=""
/><strong>Comgreen</strong></a
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a
href=""
class="nav-link"
rel="tooltip"
title=""
data-placement="bottom"
target=""
data-original-title="Log in with your credentials"
>
<i class="material-icons">fingerprint</i>Login
</a>
</li>
<li class="nav-item">
<a
href=""
class="nav-link"
rel="tooltip"
title=""
data-placement="bottom"
target=""
data-original-title="Don't have an account? Register"
>
<i class="material-icons">person_add</i>Register
</a>
</li>
</ul>
</div>
</div>
</nav>
<!--End of Navbar-->
在我的 angular.json 文件中,我的脚本中有这个:
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.js",
"./node_modules/@popperjs/core/dist/umd/popper.min.js"
]
有些人建议我为每个添加另一个点,使它们成为 (../node_modules/....) 但每次我尝试时,我都会收到一条错误消息,指出路径不存在。我是角度和引导程序的新手。这花了我三天时间,我需要有人指出我的错误。
提前致谢。