Bootstrap 5 导航栏下拉链接在 <576px 的小屏幕上不起作用
[英]Bootstrap 5 navbar dropdown links don't work on small screens <576px
问题描述
我是新手。 我有一个带有下拉菜单的工作导航栏，其中包含 3 个链接。 展开后，下拉链接在点击时显示一张卡片（卡片显示联系信息），一切正常……除了当我转到 <576px 以下的移动视图时。
我直接从 Boostrap 为 CSS、Javascript 包和图标使用了带有 CDN 的模板。
为什么这行得通，但是一旦低于 <576px 就会变得没有响应 ????
一旦我大于> 576px，它就会再次工作。 这让我发疯了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Bootstrap CSS CDN --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <!-- Bootstrap Icons CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /> <style> .bg-dark-transparent { background-color: rgba(0, 0, 0, 0.5); } </style> <title>Bio Website</title> </head> <body class="vh-100 bg-dark text-light"> <!-- NAVIGATION --> <nav class="navbar navbar-expand-md navbar-dark fixed-top"> <div class="container-fluid"> <a href="#" class="navbar-brand"><span class="badge bg-danger shadow">Joe Noobie</span></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarMain"> <ul class="navbar-nav me-auto mb-2 mb-lg-0" style="z-index: 10"> <li class="nav-item"> <a href="" class="nav-link active" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="about contact" >Info</a > </li> <li class="nav-item"> <a href="#about" role="button" class="nav-link" data-bs-toggle="collapse" aria-expanded="false" aria-controls="about" >About</a > </li> <li class="nav-item"> <a href="#contact" role="button" class="nav-link" data-bs-toggle="collapse" aria-expanded="false" aria-controls="contact" >Contact</a > </li> </ul> </div> </div> </nav> <!-- HEADER --> <header class="container fixed-top text-end mt-5"> <!-- HEADER > About & Contact dropdown content --> <div class="row mt-3"> <!-- About --> <div class="col-md-6 mt-3"> <div class="collapse multi-collapse" id="about"> <div class="card card-body text-start shadow bg-dark-transparent"> <h5 class="card-title text-danger">About</h5> <div class="card-text"> <h3 class="text-white-50 ms-3">Joe Noobie</h3> <ul class="list-unstyled ms-5"> <li>CEO of Noobie Media</li> <li>Web Developer</li> <li>Tech Support</li> <li>Graphic Designer</li> </ul> </div> </div> </div> </div> <!-- Contact --> <div class="col-md-6 mt-3"> <div class="collapse multi-collapse" id="contact"> <div class="card card-body text-start shadow bg-dark-transparent"> <h5 class="card-title text-danger">Contact</h5> <div class="card-text"> <h3 class="text-white-50 ms-3">Get in touch:</h3> <ul class="list-unstyled ms-5"> <li><i class="bi bi-house me-2 text-danger"></i>City: The City</li> <li><i class="bi bi-signpost me-2 text-danger"></i>Street: 21 Jump Str.</li> <li><i class="bi bi-telephone me-2 text-danger"></i>Phone: +555-555-555</li> <li> <i class="bi bi-envelope me-2 text-danger"></i>Email: JoeNoobie@Noobalicious.com </li> </ul> </div> </div> </div> </div> </div> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" ></script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2022-07-10 16:41:01
从 nav 和 header tags 中删除“fixed-top”类，删除此类会使标签以默认的“静态”定位方式一个接一个呈现。
<nav class="navbar navbar-expand-md navbar-dark">
<header class="container text-end mt-5">
Bootstrap 的问题：小屏幕（移动设备）上的导航栏折叠不起作用
[英]Problems with Bootstrap: Navbar collapse on small screens ( mobile) does not work
Flask - Bootstrap Navbar Dropdown 在子页面上不起作用
[英]Flask - Bootstrap Navbar Dropdown doesn't work on sub page
带下拉菜单的链接不显示，不带下拉菜单的链接仍然有效
[英]Links with dropdown menus don't show up, links without dropdown menus still work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.