Bootstrap Angular 和引导导航栏折叠不起作用?

fjaof16o  于 2023-01-15  发布在  Bootstrap
关注(0)|答案(1)|浏览(147)

导航栏折叠在小屏幕上不起作用。我点击了菜单右侧的按钮,但什么也没发生。我已经查找了其他解决方案,并更改了我的angular.json文件。

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

下面是我的.html代码:

<header class="navbar bg-main-bg pt-0 pb-0 mt-0 mb-0" style="z-index: 1000; height: 80px;">
    <nav class="container navbar-expand-md h-100">
        <a class="navbar-brand" href="#" style="margin-right: 120px; height: 50px;">
            <app-coin [width]="50" [height]="50" text="A"></app-coin>
            <h1 class="position-relative text-txt-h" style="line-height: 50px; left: 52px;">LBAR</h1>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarToggler" class="collapse navbar-collapse h-100">
            <ul class="navbar-nav h-100 text-uppercase">
                <li class="nav-item">
                    <a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" routerLink="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" routerLink="/work">Work</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" routerLink="/contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</header>

然而,它似乎仍然不起作用。当屏幕缩小时,指向页面的链接消失,通常导致链接出现的图标不起作用。我知道设置折叠值here的解决方案,但也不起作用。有没有办法让导航栏折叠工作?

c8ib6hqw

c8ib6hqw1#

除了使用ng-boostrap之外,我不得不使用这里提供的解决方案https://www.youtube.com/watch?v=m5fdwxB-jIM
总之,必须将html文件中的代码更改为:

<button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="isCollapsed">

在.ts文件中

public isCollapsed : boolean = true;

相关问题