navbar 相关问题

HTML和XML直接处理页面导航的部分

如何阻止导航栏越过滚动条

我遇到了导航栏越过滚动条的问题,我一生都无法弄清楚为什么。我到处寻找类似的问题,但没有发现任何问题。如果

回答 2 投票 0

如何创建与我的移动设备友好的导航栏配合使用的下拉菜单

我正在开发一个基本的 HTML、CSS 和 JavaScript 网站。我目前有一个适合移动设备的导航栏,并且当您单击汉堡菜单时有一个有趣的小动画。我遇到了问题

回答 1 投票 0

我需要将网站徽标放在导航栏移动的一侧,但我的代码无法正常工作,缺少什么?

我是编码新手,所以答案可能是显而易见的。我拥有包括徽标在内的所有项目,但是无论我做什么,徽标都会隐藏在导航栏后面。我正在努力制作导航...

回答 1 投票 0

我正在尝试弄清楚如何设置带有居中徽标的响应式导航栏

我是新来的,但我无法仅使用 html、css 和 js 找到这个问题的答案。这是我第一次离开 WordPress。我已经被困了三天了,我错过了一些东西。我不...

回答 2 投票 0

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

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

回答 2 投票 0

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

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

回答 2 投票 0

导航栏切换不适用于 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" ]

回答 8 投票 0

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

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

回答 3 投票 0

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

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

回答 1 投票 0

引导下拉菜单 ASP.NET MVC

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 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

回答 1 投票 0

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

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

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.