navbar 相关问题

我在我的 Angular 4 项目中使用 ng-bootstrap：我在我的Angular 4项目中使用ng-bootstrap： <navbar class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <button aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarsDefault" data-toggle="collapse" type="button"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarsDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link active" routerlink="/dashboard" routerlinkactive="active" ng-reflect-router-link="/dashboard" ng-reflect-router-link-active="active" href="/dashboard">Dashboard</a> </li> <li class="nav-item"> <a class="nav-link" routerlink="/program" routerlinkactive="active" ng-reflect-router-link="/program" ng-reflect-router-link-active="active" href="/program">Programm</a> </li> </ul> </div> </navbar> 导航栏就在那里，它反应灵敏，看起来工作正常。但是当导航栏折叠时，导航栏切换按钮不会切换导航栏，并且我找不到错误。我最终做了这样的事情：在 html 模板中我有以下代码： <nav id="mainNavbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleCollapsed()"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarSupportedContent" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}"> ...... </div> </nav> 在组件中我有这个 export class NavComponent { collapsed = true; toggleCollapsed(): void { this.collapsed = !this.collapsed; } } 非常简单且直接，在C:\Niagara\Vega\ncPortal\.angular-cli.json 在脚本下，添加此行，或指向 node_modules 中的 bootstrap.js 文件， "../node_modules/bootstrap/dist/js/bootstrap.js" 并重建您的应用程序，现在，不仅是切换，而且所有其他操作也将按预期工作。正如评论中提到的以及 jmiguel77 的最佳答案只是想分享一下，我也在 ng-bootstrap Github 文档上找到了类似的方法https://ng-bootstrap.github.io/#/components/collapse/examples 我用 [ngbCollapse]="isCollapsed" 代替。从我所看到的来看，两种方法都得出相同的结果。这是我的代码： //app-navbar.component.html <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">{{title}}</a> <button class="navbar-toggler" type="button" (click)="toggleCollapsed()" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon" ngToggler></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault" [ngbCollapse]="isCollapsed" > <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown" ngbDropdown> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdown01" ngbDropdownMenu> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> //app-navbar.component.ts import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-navbar', templateUrl: './app-navbar.component.html', styleUrls: ['./app-navbar.component.css'] }) export class AppNavbarComponent implements OnInit { @Input() title: String; isCollapsed = true; toggleCollapsed(): void { this.isCollapsed = !this.isCollapsed; } constructor() { } ngOnInit() { } } #you can use click method in your html and use router navigate in your type script. #In HTML File <a class="nav-link" (click)="onMenuClick('profile')">Profile </a> #In Type Script file onMenuClick(path) { $('.navbar-toggler').click(); this.router.navigate(['/' + path]); } 在 script 标签下的 Angular.json 文件中添加“./node_modules/jquery/dist/jquery.js”，它将起作用。我想我可以分享对我有用的东西。我有一些您可以考虑的要求；角8 引导程序4.5 ...在我的 html 模板中 [header.component.html] <nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light"> <div class="container-fluid"> <a routerLink="/" class="navbar-brand">APP_NAME</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" (click)="collapsed = !this.collapsed" > <span class="navbar-toggler-icon"></span> </button> <div id="navbarSupportedContent" [ngClass]="{ collapse: collapsed, 'navbar-collapse': true }" >  <ul class="navbar-nav ml-auto"> <li routerLinkActive="active" class="nav-item"> <a routerLink="/LINK_1" class="nav-link"> lINK_1 </a> </li> <li routerLinkActive="active" class="nav-item"> <a routerLink="/LINK_2" class="nav-link"> LINK_2 </a> </li> </ul> </div> </div> </nav> ...在我的 ts 组件内 [header.component.ts] import { Component, OnInit} from "@angular/core"; @Component({ selector: "app-header", templateUrl: "./header.component.html", styleUrls: ["./header.component.css"], }) export class HeaderComponent implements OnInit { collapsed = true; constructor() {} ngOnInit() {} } 我希望这有帮助。感谢您的反馈和建议。 :) 我在 Angular 10、Bootstrap 4.5 上也遇到了同样的问题。经过两天检查安装和提供所有必要依赖项的所有可能性后，我按照 Wyatt Lansdale 提供的链接中的说明进行操作（https://ng-bootstrap.github.io/#/components/collapse/examples）。只要我有 Bootstrap 文档中的汉堡包图标 (< span class="navbar-toggler-icon" >< /span >)，仍然没有区别，但是一旦我将其更改为汉堡包图标的 unicode 字符（& # 9 7 7 6 ；没有空格）问题就解决了！最终有效:) 正如 Sanish Joseph 提到的，即使批准的响应有效（作为解决方法），正确的解决方案是使用 angular.json（或 angular-cli.json）以及包含 bootstrap.min.js 的脚本。由于缺少引导脚本，因此需要检查该配置文件中是否也缺少引导 CSS： "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

toggle navbar ng-bootstrap

回答 8 投票 0

如何删除或增加导航栏中选定的装饰

如何在flutter中去除或增加NavigationBar中所选项目的装饰？导航栏（海拔：0，选定索引：navIndex， onDestinationSelected: (

flutter dart flutter-layout navbar

回答 3 投票 0

Bootstrap 4 - 折叠外的导航栏项目

好吧，我不得不承认，即使在 BS3 中，我也一直在努力正确地工作。但我希望在折叠的容器外部保持持久的导航栏链接。 ...

css twitter-bootstrap bootstrap-4 navbar

回答 1 投票 0

引导下拉菜单 ASP.NET MVC

在 Microsoft ASP.NET MVC 应用程序中，我尝试实现带有下拉菜单的 Bootstrap NavBar。带有下拉菜单的菜单项不会下拉并显示子菜单项。引导程序...

asp.net-mvc navbar

回答 1 投票 0

我的导航栏无法使用背景视频，我该如何修复它？

一旦我放入背景视频，我就无法再按导航栏了，有什么问题吗？我也尝试过任何类型的 z-index 但它不起作用。我尝试删除视频，然后它起作用了，但我没有

html css video navbar z-index

回答 1 投票 0

由 javascript 添加的类但未应用 css？

我将使用 javascript 和 css 创建一个切换菜单类 .menu-slider 添加了属性显示块。但它不起作用，只有类 teggled 和 css 未应用这是代码 ...

javascript html css navbar toggle

回答 1 投票 0

Ruby on Rails 7 bootstrap 5 下拉导航栏不起作用

我正在尝试使用 Bootstrap 5 运行一些示例 Rails 应用程序。我创建了下拉菜单，但导航栏没有下拉。我尝试了所有教程，但没有任何作用。有我的配置：导轨 7.1.3.2

ruby-on-rails bootstrap-5 navbar

回答 1 投票 0

如何修复滚动时图片与导航栏重叠的问题？

我目前正在为我的学校开发一个网站，我遇到的问题是，每当我向下滚动时，图像就会越过我的导航栏。我是一个完全的初学者，不知道问题出在哪里......

html css navbar gallery

回答 1 投票 0

VueJS 成功登录后如何更新导航栏？

用户从登录页面登录后，我试图“重新渲染”我的导航栏。我有某些导航链接，这些链接将根据用户是否登录而显示。现在我是仁...

javascript vue.js navbar

回答 2 投票 0

如何在桌面和移动设备之间保持导航栏中购物车图标的位置？

我使用 Bootstrap 和自定义 CSS 来设计一个导航栏，在桌面和移动设备上将购物车图标保留在栏的右侧。无论我如何排序元素，我似乎都做不到

html css bootstrap-5 navbar

回答 1 投票 0

CSS 文件在屏幕尺寸小于 768px 时干扰导航栏宽度

我的网站导航栏遇到问题，CSS 文件似乎干扰了其宽度，特别是在屏幕尺寸小于 768 像素的情况下。导航栏没有覆盖整个宽度...

css navbar

回答 1 投票 0

在响应式网站的最底部创建粘性导航栏时遇到问题

我在图像下方创建了一个导航栏，以显示各种社交媒体平台的图标。然而，我试图将这些图标放置在网站的最底部并使其响应

html css navigation navbar sticky

回答 2 投票 0

导航栏未出现在结果中？

我正在学习 Angular 15.0.0，我遇到了一个问题导航栏没有出现，为什么除了食谱书之外什么也没有出现代码 &... 我正在学习 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课程。导航栏 - 它是如何工作的 |引导程序 5 导航栏需要用 .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> 演示@StackBlitz

angular bootstrap-modal navbar

回答 1 投票 0

如何为响应速度太快的标题导航栏编写 HTML CSS 代码

我想制作一个导航栏，但我无法为其编写正确的 CSS 样式。如何制作徽标图像向左浮动、菜单内容向右浮动的导航栏。我尝试过普通的 CS...

css bootstrap-4 frontend tailwind-css navbar

回答 1 投票 0

navbar 相关问题

最新问题