Bootstrap 4汉堡图标加载时显示为X，点击后恢复的修复方案咨询

这个问题我之前帮不少开发者排查过，核心原因要么是初始状态的样式逻辑搞反了，要么是没正确利用Bootstrap 4自带的状态类。咱们一步步来解决：

1. 先确认HTML结构的正确性 #

Bootstrap 4的导航栏折叠按钮默认需要带collapsed类，用来标识“导航栏处于折叠状态”——这是触发样式切换的关键。检查你的按钮代码，初始必须包含这个类：

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

如果没加collapsed，按钮会默认处于“展开”状态的样式，也就是直接显示X。

2. 修正CSS的状态区分逻辑 #

你的问题大概率是把“激活状态（X形）”的样式写到了默认状态里，或者反过来。正确的逻辑是：

• 默认带collapsed类时：显示三条堆叠的线条
• 移除collapsed类（点击后）：切换为X形

替换成下面的CSS试试：

/* 你的导航栏背景样式保留 */
.navbar { 
  background: rgb(5,6,31); 
  background: linear-gradient(360deg, rgba(5,6,31,1) 0%, rgba(1,49,85,1) 100%); 
}
.navbar-nav > li { 
  padding-left: 8px; /* 补全你之前没写完的语法 */
}

/* 汉堡线条默认样式（折叠状态） */
.hamburger-line {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #fff; /* 根据你的导航栏颜色调整 */
  transition: all 0.3s ease-in-out;
  transform: none; /* 强制初始无旋转 */
  opacity: 1; /* 初始全部显示 */
}

/* 展开状态（按钮无collapsed类）：切换为X */
.navbar-toggler:not(.collapsed) .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navbar-toggler:not(.collapsed) .hamburger-line:nth-child(2) {
  opacity: 0; /* 中间线条隐藏 */
}

.navbar-toggler:not(.collapsed) .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

3. 排查冲突样式 #

如果还是有问题，打开浏览器开发者工具（F12），选中汉堡线条元素，查看「计算样式」：

• 确认初始状态下transform是none，opacity是1
• 检查是否有其他CSS规则（比如全局样式、第三方插件）覆盖了你的线条样式

这样调整后，页面加载时按钮会默认显示三条堆叠线条，点击后平滑切换为X，再次点击恢复初始状态。

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