navbar 相关问题

如何使用 vue-router-links 制作导航栏项目来切换导航栏？

我有一个运行良好的导航栏。除了单击某个项目时它不会关闭这一事实之外。 当我单击窗口中的其他任何位置时，它确实会关闭。 我在 laravel 8 和 vue-3 中工作，有

尝试让 Bootstrap 4 导航栏折叠在 Vue 中工作

我正在尝试使引导导航栏折叠在移动设备上工作，因为它根本不起作用。请不要在代码中提供其他依赖项，例如 vue-bootstrap 或实现 jquery...

导航栏切换不适用于 Angular 4 / ng-bootstrap

我在我的 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 }" > <!-- right nav menus --> <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" ]

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

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

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

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

引导下拉菜单 ASP.NET MVC

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

导航栏未出现在结果中？

我正在学习 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

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

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

单击按钮时出现不需要的蓝色选择突出显示（仅限 Safari）

我真的不确定该用什么标题来回答这个问题，所以我认为最好的解释方法是用一个片段： $(文档).ready(函数() { $(".navbar-toggle").on("点击", function () { ...

Flutter 对话框不会使系统导航栏透明

在本机应用程序中，当打开警报或对话框时，状态栏和系统导航栏变得透明，但在颤振系统导航栏中保持白色..请帮助我实现这一点。 在...

如何在不使用 javascript 或 JQuery 的情况下使导航栏按钮在单击时显示和隐藏 div/部分？

我正在为作业编写一个页面，导航栏中包含三个部分：业务计划、关于我们和联系我们。我有来自 codepen 的导航栏，我正在学习标签和无线电我......

导航栏颜色更改仅适用于主页的滚动效果

我创建了一个changeColour函数，其中导航栏在滚动超过某个点后会改变颜色，效果完美。问题是我只想让它在我的主页上生效......