navbar 相关问题

如何使用 React 和 TailwindCSS 隔离响应式移动菜单的可点击区域

从 'react' 导入 React, { useState } 从 'react-router-dom' 导入 { NavLink } 从“react-icons/rx”导入{RxHamburgerMenu}； 从“react-icons/fa”导入 { FaTimes } ； 我...

如何使用 React 和 Tailwind 隔离响应式移动菜单的可点击区域

从 'react' 导入 React, { useState } 从 'react-router-dom' 导入 { NavLink } 从“react-icons/rx”导入{RxHamburgerMenu}； 从“react-icons/fa”导入 { FaTimes } ； 我...

bootstrap 下拉菜单在 laravel 项目中不起作用

引导下拉菜单不会出现。我该如何解决这个问题？ 在导航栏中单击时，引导下拉菜单不会出现。我该如何解决这个问题？ <li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> <span class="caret"></span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> {{ __('Logout') }} </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </div> </li> 您的下拉脚本没有问题。 检查 jquery 是否已加载 检查你的 app.js 并在 boottrap 之前加载 jquery 奔跑npm run dev 如果没有问题，请检查您的浏览器控制台。 如果您正在使用 https://cdn.jsdelivr.net/npm/[电子邮件受保护]/dist/js/bootstrap.min.js 请替换为以下cdn并尝试 https://cdn.jsdelivr.net/npm/[电子邮件受保护]/dist/js/bootstrap.bundle.min.js 请注意，自 Bootstrap 5 起，正确的属性是 data-bs-toggle 不再是数据切换。 这适用于所有数据属性。

调试仅在移动 chrome 中出现但在桌面 chrome 中未出现的问题的最直接方法是什么？

我有一个网站https://jzleetcode.github.io。在移动版 Chrome 上，有时右上角的菜单按钮没有响应。刷新后，有时它会开始工作。 当我减小

主页按钮与其他导航栏选项不在同一行是否有原因？

我正在制作一个带有下拉功能+主页按钮的导航栏。但是，“主页”按钮保留在页面的右上角，而不是与下拉选项一起显示。在这个导航栏中，...

BlazorStrap 导航栏无法打开

我正在使用 BlazorStrap 导航栏。当显示屏宽度减小时，会显示切换按钮。 问题是现在单击它不会打开菜单。 我创建了一个 Blazor 服务器应用程序

将 Bootstrap 4 导航栏居中（大型菜单）

在bootstrap4中我认为： https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css 我试图让我的大型菜单居中，我有这个： 在bootstrap4中我认为： https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css 我试图让我的大型菜单居中，我有这个： <nav class="navbar navbar-light bg-light navbar-expand-lg sticky-top" id="myNavbar"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mainNav"> ... 然后根据这个： https://getbootstrap.com/docs/4.0/components/navbar/ 我必须添加一个 div 容器来使其居中。 S 我能够通过代码将其居中： <nav class="navbar navbar-light bg-light navbar-expand-lg sticky-top" id="myNavbar"> <div class="container"> <!-- centering nav bar container --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mainNav"> ... 成功了，它居中了！ 由于我将 div 容器放在类导航栏之后的行中，导航栏扩展了屏幕的宽度......响应也正确。 我只是不明白为什么元素之间的填充消失了，插入符号在居中的菜单中看起来消失了。 （不再是在txt的右侧）......不知道还有什么地方可以改变来解决这个问题。 菜单的完整引导结构是： <nav class="navbar navbar-light bg-light navbar-expand-xl sticky-top" id="myNavbar"> <div class="container"> <!-- centering nav bar container --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mainNav"> <ul class="navbar-nav ml-auto nav-fill"> <li class="nav-item px-4 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- i class="fa-solid fa-circle-info"></i --> About</a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown"> <div class="d-md-flex align-items-start justify-content-start"> <div> <div class="dropdown-header">About US</div> <a class="dropdown-item" href="{% url 'mainpage:siteuserguide' %}">Site User's Guide</a> <etc...></etc...> </div> </div> </div> </li> <li class="nav-item px-4 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- i class="fa-solid fa-circle-info"></i --> About</a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown"> <div class="d-md-flex align-items-start justify-content-start"> <div> <div class="dropdown-header">About US</div> <a class="dropdown-item" href="{% url 'mainpage:siteuserguide' %}">Site User's Guide</a> <etc...></etc...> </div> </div> </div> </li> <li class="nav-item px-4 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- i class="fa-solid fa-circle-info"></i --> About</a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown"> <div class="d-md-flex align-items-start justify-content-start"> <div> <div class="dropdown-header">About US</div> <a class="dropdown-item" href="{% url 'mainpage:siteuserguide' %}">Site User's Guide</a> <etc...></etc...> </div> </div> </div> </li> </ul> </div> </nav> </div> <!-- end centering container --> 图片说明了外观正确但未居中的菜单项，后面是正确居中的导航栏但不是正确的项目（中间没有填充，只需要一点插入符） 在您的代码中，您在元素上使用了 ml-auto 类，该类应用了 margin-left: auto。为了使内容水平居中，我将其更改为 mx-auto，它在两侧水平应用边距（左边距：自动；右边距：自动）。 您的原始代码类：navbar-nav ml-auto nav-fill 更新了代码类：navbar-nav mx-auto nav-fill”

Vite+React 项目子组件没有向父组件传递值

我正在开发一个 Vite+React 项目，目前我正在开发移动导航栏，所以我的第一个问题是当我第一次单击移动导航图标时，导航组件正在显示，但在第二个 cli 上...

引导导航栏文本在我单击它后变黑，但直到我单击页面上的另一个元素

我的代码中遇到了 Bootstrap 导航栏的问题。当我单击某个元素导航到另一个页面然后返回时，先前单击的链接的文本颜色变为黑色并且

为什么我的导航栏的样式在页面之间不一致？

所以我一直在 Nekoweb 上摆弄我的网站，试图修复导航栏。我已经用 css 设计了它的样式。样式似乎在index.html（我的主/主页）上工作得很好。哈...

使用固定导航栏时如何避免覆盖正文内容？

bslib::page_navbar 函数有一个位置参数，允许我们在向下滚动时保持导航栏可见（position="fixed-top"）。然而，正如文档所指出的......

使用`bslib`固定导航栏的良好实践

bslib::page_navbar 函数有一个位置参数，允许我们在向下滚动时保持导航栏可见（position="fixed-top"）。然而，正如文档所指出的......

如何通过链接到桌面和移动设备上包含 HTML 代码的一个文档，在多个 HTML 文档中显示我的导航栏代码？

我正在创建一个博客类型的网站，我希望导航栏的代码出现在网站的多个页面上，但从一个文件链接。我希望它能在 sa 中链接...

Bootstrap Navbar 在折叠时移动窗口

这一切都发生在移动屏幕上。我有这个导航栏： 这一切都发生在移动屏幕上。我有这个导航栏： <nav class="navbar navbar-dark sticky-top navbar-expand-lg"> <div class="container-fluid"> <a class="navbar-brand" href="#top"> <img src="images/id/logo.svg" height="30" class="d-inline-block align-top" alt=""> </a> <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="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#presentacion">Presentación</a> </li> <li class="nav-item"> <a class="nav-link" href="#proyectos">Proyectos</a> </li> <li class="nav-item"> <a class="nav-link" href="#festivales">Festivales</a> </li> <li class="nav-item"> <a class="nav-link" href="#formacion">Formación</a> </li> <li class="nav-item"> <a class="nav-link" href="#hoy">Hoy en Día</a> </li> <li class="nav-item"> <a class="nav-link" href="#forma_cto">Contacto</a> </li> <li class="nav-item"> <a class="nav-link" href="#ubi">Ubicación</a> </li> <li class="nav-item"> <a class="nav-link" href="videos.html">Videos</a> </li> </ul> </div> </div> </nav> 而且，为了在单击菜单时折叠菜单，我使用了这个 jquery： $('.nav-link, .navbar-brand').on('click', function() { $('.navbar-collapse').collapse('hide'); }); 问题是，这会将窗口向下移动多个像素（正是菜单可见时的高度，在本例中为 296 像素）。现在，我尝试添加一些滚动： $('.nav-link, .navbar-brand').on('click', function() { $(window).scrollTop($(window).scrollTop() - 296); $('.navbar-collapse').collapse('hide'); }); 而且，它会折叠，但不会向上滚动。即使我交换线路也不起作用（相同的行为，会折叠但不会向上滚动）： $('.nav-link, .navbar-brand').on('click', function() { $('.navbar-collapse').collapse('hide'); $(window).scrollTop($(window).scrollTop() - 296); }); 而且，奇怪的是，如果我只调用scrollTop api，则向上滚动就完成了： $('.nav-link, .navbar-brand').on('click', function() { $(window).scrollTop($(window).scrollTop() - 296); }); 如何使导航栏折叠并使窗口向上滚动 296 像素？ 预先感谢。 解决方案是将导航栏与正文“分离”，为此，我给正文添加了一些填充（与导航栏的高度一样多），并向导航栏添加了 css 值“position:固定”（以及其他值）： body { padding-top: 56px; } .navbar { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } jquery 保持不变（如乞讨中所示）： $('.nav-link, .navbar-brand').on('click', function() { $('.navbar-collapse').collapse('hide'); }); 我希望这对将来的人有帮助。 干杯！！！

Wordpress 网站编辑器。我不明白为什么导航菜单在整个网站编辑器中可见，但在公共网站上不可见

二十二十四主题。我正在创建一个新网站。我之前已将 3 个网站更改为该主题，但对于该网站，我无法在公共网站上显示菜单，即 https://

导航栏切换按钮打开但之后不关闭

这是我的带有可折叠导航栏的代码。切换按钮打开但不关闭菜单： 这是我的带有可折叠导航栏的代码。切换按钮打开但不关闭菜单： <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js" integrity="sha256-Fb0zP4jE3JHqu+IBB9YktLcSjI1Zc6J2b6gTjB0LpoM=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" /> <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #134d8c;"> <div class="container-fluid"> <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="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a href="/www" class="nav-link <?php echo ($page == 'home') ? 'active' : '' ?>"> <i class="fs-5 bi-house"></i> <span class="ms-1 me-2 d-none d-sm-inline">Home</span> </a> </li> <li class="nav-item"> <a href="parametri.php" class="nav-link <?php echo ($page == 'parametri') ? 'active' : '' ?>"> <i class="fs-5 bi-gear"></i> <span class="ms-1 me-2 d-none d-sm-inline">Parametri</span> </a> </li> <li class="nav-item"> <a href="anagrafiche.php?nav=anagrafica_alunni" class="nav-link <?php echo ($page == 'anagrafica_alunni') ? 'active' : '' ?>"> <i class="fs-5 bi-backpack2"></i> <span class="ms-1 me-2 d-none d-sm-inline">Anagrafica alunni</span> </a> </li> <li class="nav-item"> <a href="anagrafiche.php?nav=anagrafica_famiglie" class="nav-link <?php echo ($page == 'anagrafica_famiglie') ? 'active' : '' ?>"> <i class="fs-5 bi-people"></i> <span class="ms-1 me-2 d-none d-sm-inline">Anagrafica famiglie</span> </a> </li> <li class="nav-item"> <a href="bonus.php" class="nav-link <?php echo ($page == 'bonus') ? 'active' : '' ?>"> <i class="fs-5 bi-trophy"></i> <span class="ms-1 me-2 d-none d-sm-inline">Bonus</span> </a> </li> <li class="nav-item"> <a href="turni_pulizie.php" class="nav-link <?php echo ($page == 'turni_pulizie') ? 'active' : '' ?>"> <i class="fs-5 bi-trash"></i> <span class="ms-1 me-2 d-none d-sm-inline">Turni pulizie</span> </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <i class="fs-5 bi-cookie"></i> Turni cucina </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a href="turni_cucina.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina') ? 'active' : '' ?>">Calendario</a></li> <li><a href="turni_cucina_famiglie.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina_famiglie') ? 'active' : '' ?>">Famiglie</a></li> <li><a href="turni_fissi_cucina.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_fissi_cucina') ? 'active' : '' ?>">Fissi</a></li> <li><a href="turni_cucina_scambi.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina_scambi') ? 'active' : '' ?>">Scambi</a></li> <li><a href="turni_cucina_pagamenti.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina_pagamenti') ? 'active' : '' ?>">Pagamenti</a></li> </ul> </li> </ul> </div> </div> </nav> 我发现this类似的问题，但我的代码似乎已经如答案所示（在引导之前包括jquery）。 为什么它只能以一种方式起作用？ 通过删除bootstrap.bundle.min.js，它可以正常工作。 可能与bootstrap.min.js有冲突 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js" integrity="sha256-Fb0zP4jE3JHqu+IBB9YktLcSjI1Zc6J2b6gTjB0LpoM=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" /> <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #134d8c;"> <div class="container-fluid"> <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="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a href="/www" class="nav-link <?php echo ($page == 'home') ? 'active' : '' ?>"> <i class="fs-5 bi-house"></i> <span class="ms-1 me-2 d-none d-sm-inline">Home</span> </a> </li> <li class="nav-item"> <a href="parametri.php" class="nav-link <?php echo ($page == 'parametri') ? 'active' : '' ?>"> <i class="fs-5 bi-gear"></i> <span class="ms-1 me-2 d-none d-sm-inline">Parametri</span> </a> </li> <li class="nav-item"> <a href="anagrafiche.php?nav=anagrafica_alunni" class="nav-link <?php echo ($page == 'anagrafica_alunni') ? 'active' : '' ?>"> <i class="fs-5 bi-backpack2"></i> <span class="ms-1 me-2 d-none d-sm-inline">Anagrafica alunni</span> </a> </li> <li class="nav-item"> <a href="anagrafiche.php?nav=anagrafica_famiglie" class="nav-link <?php echo ($page == 'anagrafica_famiglie') ? 'active' : '' ?>"> <i class="fs-5 bi-people"></i> <span class="ms-1 me-2 d-none d-sm-inline">Anagrafica famiglie</span> </a> </li> <li class="nav-item"> <a href="bonus.php" class="nav-link <?php echo ($page == 'bonus') ? 'active' : '' ?>"> <i class="fs-5 bi-trophy"></i> <span class="ms-1 me-2 d-none d-sm-inline">Bonus</span> </a> </li> <li class="nav-item"> <a href="turni_pulizie.php" class="nav-link <?php echo ($page == 'turni_pulizie') ? 'active' : '' ?>"> <i class="fs-5 bi-trash"></i> <span class="ms-1 me-2 d-none d-sm-inline">Turni pulizie</span> </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <i class="fs-5 bi-cookie"></i> Turni cucina </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a href="turni_cucina.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina') ? 'active' : '' ?>">Calendario</a></li> <li><a href="turni_cucina_famiglie.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina_famiglie') ? 'active' : '' ?>">Famiglie</a></li> <li><a href="turni_fissi_cucina.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_fissi_cucina') ? 'active' : '' ?>">Fissi</a></li> <li><a href="turni_cucina_scambi.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina_scambi') ? 'active' : '' ?>">Scambi</a></li> <li><a href="turni_cucina_pagamenti.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina_pagamenti') ? 'active' : '' ?>">Pagamenti</a></li> </ul> </li> </ul> </div> </div> </nav>

使用导航层叠菜单

我有一个菜单，大致定义如下： 从“反应”导入{组件}； 从“react-bootstrap”导入 { Nav, Navbar, NavDropdown }; 导出默认类 App 扩展 Compon...

我怎样才能将我的导航栏居中，似乎无法找到问题在我的css和html上？

我正在努力让导航栏转到我的标题右侧，它位于我的徽标的正下方。 .primary-header{ /*带有导航栏的主顶部标题*/ 显示：柔性； } .primary-header img {...

如何使我的导航栏项目垂直，同时让徽标和图标保持在顶部

这是我第一次做一些响应式设计，我用它作为练习。但在尝试了几个小时之后，我现在很绝望。所以我有一个简单的导航栏，左上角有一个徽标，...

React 模块 css 背景过滤器不起作用为什么？

我在这里做错了什么？为什么 css 没有应用于 div 并使其模糊有人可以帮助使我的导航栏模糊吗？ 我想让我的导航栏变得模糊