navbar 相关问题

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

我有这个 Bootstrap 5 megamenu，我想让所有下拉菜单与所有页面宽度一样长，并且都具有相同的位置。喜欢这个页面。如何使下拉菜单变大？哪个

html css bootstrap-5 navbar

回答 1 投票 0

</desc> <question vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Front Page</title> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="87f3e6eeebf0eee9e3e4f4f4c7b5a9b7a9b7">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="bg-slate-600"> <nav class="bg-white text-black h-12 flex items-center justify-between px-4"> <div class="text-lg font-semibold">ABC Enterprises</div> <ul class="flex items-center space-x-4"> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Solutions</a> <div class="dropdown-content absolute hidden bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG & Sustainability Reporting & Management</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Carbon Accounting & GHG Measurement</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Sustainable Procurement & Sourcing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Portfolio Management For Investors</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Consulting</a> </div> </li> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Industries</a> <div class="dropdown-content absolute bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Manufacturing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Agri-business & Forestry</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Retail & Hospitality</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Health & Education</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Infrastructure</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Financial Institutions & Funds</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Real Estate & Construction</a> </div> </li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Contact Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">About Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Sign In</a></li> </ul> </nav> </body> </html> </code></pre> </div> </div> <p></p> <p>对于大多数人来说，我面临的问题很容易，我在过去的 6-7 个小时里都被困在上面。所以我也尝试了 group-hover:block ，但当我将鼠标悬停在解决方案和资源上时，它仍然没有显示下拉菜单，请帮助我，这很紧急！！！</p> </question> <answer tick="false" vote="0"> <p>2.0.0版本中没有任何类定义<pre><code>group-hover:block</code></pre>，您需要在Tailwind上升级到新版本。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Front Page</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-slate-600"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Front Page</title> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="f08491999c87999e94938383b0c2dec0dec0">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="bg-slate-600"> <nav class="bg-white text-black h-12 flex items-center justify-between px-4"> <div class="text-lg font-semibold">ABC Enterprises</div> <ul class="flex items-center space-x-4"> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Solutions</a> <div class="dropdown-content absolute hidden bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG & Sustainability Reporting & Management</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Carbon Accounting & GHG Measurement</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Sustainable Procurement & Sourcing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Portfolio Management For Investors</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Consulting</a> </div> </li> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Industries</a> <div class="dropdown-content absolute bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 hidden group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Manufacturing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Agri-business & Forestry</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Retail & Hospitality</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Health & Education</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Infrastructure</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Financial Institutions & Funds</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Real Estate & Construction</a> </div> </li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Contact Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">About Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Sign In</a></li> </ul> </nav> </body> </html> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>

html css header tailwind-css navbar

回答 0 投票 0

样式未应用于我的导航栏，不确定为什么

我是一名初学者，目前正在为 freeCodeCamp 作业制作作品集。我打算让我的导航栏元素水平显示，并具有特定的字体和样式元素，但这些都不是

html css navbar nav

回答 2 投票 0

我的“粘性”在找到容器时不起作用

当我滚动到愿景任务部分时，粘滞键不起作用。我需要帮助，身体里也有更多的容器。我尝试了不同的位置，但无法使其发挥作用。我不知道怎么...

html css navbar sticky

回答 1 投票 0

导航栏切换器在展开时不会变成“X”

对于contex，我使用HTML和CSS（通过CDN连接的链接/脚本标签使用Bootstrap 5）来创建前端响应式静态网站。我的问题是，当切换器展开时，它......

html css flexbox bootstrap-5 navbar

回答 1 投票 0

如何使用 CSS 和 HTML 使导航栏居中

我创建了一个导航栏，但我不知道如何将其置于网页的中心。请告知，我已将链接附加到底部的小提琴。不知道还应该写什么作为堆栈溢出...

html css navbar

回答 4 投票 0

在最终位置时调整粘性元素的大小

我在页面横幅下有一个水平菜单栏。栏上有一个圆形 div。当用户向下滚动时，菜单会粘在页面顶部。我试图弄清楚如何缩小圆形 div 当...

css navbar sticky

回答 1 投票 0

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

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

html css web scrollbar navbar

回答 2 投票 0

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

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

javascript html css navbar

回答 1 投票 0

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

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

html css navbar

回答 1 投票 0

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

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

html css header navbar responsive

回答 2 投票 0

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

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

vue.js navbar

回答 2 投票 0

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

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

twitter-bootstrap vue.js vuejs2 bootstrap-4 navbar

回答 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 }" >  <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。带有下拉菜单的菜单项不会下拉并显示子菜单项。引导程序...