求助：如何用Bootstrap实现屏幕<576px时显示3个导航按钮、宽屏隐藏？

你的代码存在两个核心问题，导致导航按钮始终不可见：

1. 缺少Bootstrap折叠功能的依赖脚本：折叠菜单（collapse）需要popper.js和Bootstrap自身的JavaScript文件支持，你只引入了jQuery，点击切换图标无法触发菜单展开。
2. 导航栏展开逻辑冲突：navbar-expand-sm类会让导航在≥576px的屏幕自动展开，但你给导航列表加了d-sm-none（宽屏隐藏），同时小屏时折叠容器默认处于隐藏状态，又没有脚本支持展开，导致按钮完全看不到。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  <!-- 引入必要的脚本：jQuery → Popper.js → Bootstrap JS -->
  <script src="jquery-3.4.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 移除navbar-expand-sm类，让导航默认处于折叠状态 -->
  <nav class="navbar">
    <a class="navbar-brand" href="#">Logo</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <!-- 保留d-block d-sm-none，确保小屏显示、宽屏隐藏 -->
      <ul class="navbar-nav d-block d-sm-none">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
</body>
</html>

关键修改说明 #

• 移除navbar-expand-sm：让导航栏在所有屏幕尺寸下默认保持折叠状态，只有点击切换图标才会展开菜单。
• 补充依赖脚本：按顺序引入popper.js和Bootstrap JS，确保折叠交互正常工作。如果你的本地有这两个文件，也可以用本地路径替代CDN链接。
• 更新折叠属性：将data-toggle改为data-bs-toggle，data-target改为data-bs-target——这是Bootstrap 5的属性命名规范，旧版v4用不带-bs的属性，但v5必须加，否则功能失效。
• 保留d-block d-sm-none：这个类组合确保导航列表在屏幕宽度<576px时显示，≥576px时隐藏，完全匹配你的需求。

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