Bootstrap 5导航栏链接在<576px小屏设备下点击失效问题

• 触发链接属性缺失：About和Contact两个折叠触发按钮只写了href锚点，没有加Bootstrap Collapse组件要求的data-bs-target属性。桌面端导航处于常驻展开状态时，Bootstrap可以兼容通过href识别折叠目标，但移动端导航本身就是折叠组件，锚点默认跳转逻辑被拦截，导致找不到要展开的目标节点。
• 空链接打断交互：Info按钮的href属性值为空字符串，点击时会触发页面默认刷新/跳转行为，直接打断折叠组件的JS执行。
• 层级冲突：移动端展开导航折叠面板时，导航面板默认层级低于固定定位的header区域，就算卡片正常展开也会被导航层遮挡，看起来像没有响应。
• 额外注意：你当前使用的navbar-expand-md类对应的导航展开断点是≥768px，不是你提到的576px，如果需要在≥576px时就显示水平导航，需要把这个类替换为navbar-expand-sm。

• 给About、Contact两个触发链接补上对应data-bs-target属性，明确指定折叠目标节点。
• 将所有触发折叠的导航链接href属性改为#，阻止默认跳转行为打断交互。
• 给导航折叠面板设置更高的z-index值，避免和header区域出现层级遮挡。
• 可选：添加小段JS，实现移动端点击导航链接后自动收起导航折叠面板，优化交互体验。

<!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" style="z-index: 1050;">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <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"
                data-bs-target="#about"
                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"
                data-bs-target="#contact"
                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>
    <!-- 可选：点击导航链接后自动收起移动端导航菜单 -->
    <script>
      const navLinks = document.querySelectorAll('.navbar-nav .nav-link')
      const navbarCollapse = document.getElementById('navbarMain')
      const bsCollapse = bootstrap.Collapse.getOrCreateInstance(navbarCollapse, {toggle: false})
      navLinks.forEach(link => {
        link.addEventListener('click', () => {
          if(window.innerWidth < 768) { // 如果换成navbar-expand-sm就把这里的判断值改成576
            bsCollapse.hide()
          }
        })
      })
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者FOSS_Learner