Bootstrap 4导航栏切换按钮（汉堡图标）不显示问题

我帮你梳理几个最可能导致这个问题的原因和对应的修复方案：

1. 类名拼写错误 #

你的按钮里写了navbar-ligh，这明显是笔误，正确的类名应该是navbar-light（少了最后一个t）。这个类是Bootstrap用来控制导航栏按钮样式的关键类，拼写错误会直接导致图标无法正常渲染。

修复后的按钮开头代码：

<button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">

2. 缺少汉堡图标核心元素 #

你代码里按钮内部是<...，说明没添加Bootstrap自带的汉堡图标结构。必须在按钮内加上<span class="navbar-toggler-icon"></span>，这是Bootstrap生成汉堡图标的必要元素。

完整的按钮代码应该是：

<button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

3. 检查Bootstrap资源是否正确引入 #

确保页面已经正确加载了Bootstrap的CSS和JS文件（如果用的是Bootstrap 4及以下版本，还需要引入jQuery和Popper.js）。资源路径错误或未引入都会导致按钮样式和交互失效。

示例引入方式：
在<head>中添加CSS：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

在<body>末尾添加JS：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

4. 排查自定义样式冲突 #

如果你写了自定义CSS，检查是否不小心把.navbar-toggler设置成display: none、opacity: 0，或者按钮颜色和背景色一致导致视觉上呈现空白。可以用浏览器开发者工具（F12）查看按钮元素的样式，确认是否有样式被意外覆盖。

按上面的步骤逐一排查，应该就能解决汉堡按钮不显示的问题啦！

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