Bootstrap中.d-block .d-sm-none失效，汉堡菜单全尺寸可见求助

核心问题1：响应式类加错位置+格式错误 #

你把d-block d-sm-none加到了菜单列表<ul>上，但这组类应该作用在汉堡按钮上。另外，类名里不能带.，比如.d-block要改成d-block——带点的是CSS选择器写法，不是HTML的class属性值。

核心问题2：Bootstrap版本混用 #

你同时用了Bootstrap 3的navbar-default和Bootstrap 5的navbar-toggler，两套样式规则冲突，直接导致响应式控制失效。统一用Bootstrap 5的导航类就能解决这个冲突。

额外问题：HTML结构错误 #

你的<ul>标签没闭合，还有末尾多余的</div>，这些语法错误也会影响页面正常渲染。

修正后的完整代码 #

<!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">

  <title>Menu</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <!-- 替换为Bootstrap5的导航栏类 -->
    <nav id="header-nav" class="navbar navbar-expand-sm navbar-light bg-light">
      <div class="container-fluid">
        <a href="#" class="navbar-brand">Food,LLC</a>
        <!-- 把响应式类加到汉堡按钮上，修正类名格式 -->
        <button class="navbar-toggler d-block d-sm-none" 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">
          <!-- 列表默认在小屏幕以上显示，xs下通过按钮控制展开 -->
          <ul class="navbar-nav text-center">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Chicken</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Beef</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Sushi</a>
            </li>
          </ul> <!-- 补上闭合的ul标签 -->
        </div>
      </div>
    </nav>
  </header>

  <script src="js/jquery-3.6.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

关键修改说明 #

• 导航栏用navbar-expand-sm：设定在sm（≥576px）及以上屏幕自动展开菜单，xs屏幕则折叠显示汉堡按钮。
• 汉堡按钮添加d-block d-sm-none：实现仅在xs屏幕显示，sm及以上尺寸隐藏。
• 移除多余的闭合</div>，补上<ul>的闭合标签，保证HTML结构合法。
• 统一使用Bootstrap 5的类，彻底避免版本冲突问题。

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