如何修复代码使Burger Navbar正常显示并支持样式定制

问题根源及修复步骤 #

• 汉堡按钮类名误用
  Bootstrap 4的汉堡按钮不需要collapse类，且icon-bar是Bootstrap 3的写法，Bootstrap 4需替换为navbar-toggler-icon。你添加的collapse类会让按钮默认隐藏，进而显示原生按钮样式。

• 全局CSS破坏Navbar布局
  .navbar * { display: inline; }强制Navbar内所有元素为行内显示，包括汉堡按钮的图标组件和需要块级显示的元素，直接打乱Bootstrap默认样式；全局padding也会影响按钮正常渲染。需将选择器改为仅针对导航链接设置样式。

• Navbar结构不符合Bootstrap 4规范
  Bootstrap 4已废弃navbar-header类，品牌链接和汉堡按钮应直接放在container-fluid内部，折叠菜单的collapse容器也需置于其中，保证布局结构正确。

• CSS与JS版本不匹配
  你使用的Bootstrap CSS是4.6.2版本，但JS是4.3.1，版本不一致可能导致交互功能异常，需统一版本。

修正后的完整代码 #

/* 仅针对导航链接和品牌设置样式，避免破坏Navbar内部组件 */
.navbar .nav-link {
  padding: 0 18px;
  font-family: "Nunito";
}

.navbar-brand {
  font-family: "Nunito";
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<section id="brand-page">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">S|K</a>

      <!-- 修正汉堡按钮类名，移除collapse，使用正确图标类 -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- 折叠容器放在container-fluid内部 -->
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">My Story</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Education</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contacts</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</section>

<!-- 统一使用4.6.2版本的JS文件 -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

额外说明 #

• 若需自定义汉堡图标样式，可通过覆盖.navbar-toggler-icon的背景图或替换内部元素实现，比如使用自定义SVG图标。
• 确保已引入Nunito字体，否则字体设置不会生效。

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