自定义Bootstrap 4导航栏后汉堡图标消失问题求助

这个问题我之前也碰到过，其实不是汉堡图标真的消失了，而是视觉上看不到了——原因在于Bootstrap 4的导航栏切换按钮（汉堡图标）的默认样式完全依赖navbar-light或navbar-dark这两个类来定义颜色：

• 当使用navbar-light时，汉堡图标会被设置为深色（适配浅色背景）；
• 当使用navbar-dark时，汉堡图标会被设置为浅色（适配深色背景）；
• 如果移除这两个类，Bootstrap就不会给汉堡图标设置任何默认颜色，它的颜色会和你自定义的导航栏背景色一致，自然就“隐身”了。

另外要注意，navbar-light/navbar-dark不只是控制背景色，它们是Bootstrap导航栏的颜色体系开关，负责统一导航栏内文字、按钮、图标等元素的颜色适配，直接移除会破坏这些默认样式关联。

两种解决方法 #

方法1：保留基础类，用自定义类覆盖背景色 #

这是最稳妥的方式，既保留Bootstrap的默认颜色适配逻辑，又能自定义导航栏背景：

<!-- 保留navbar-light，添加自定义类navbar-custom -->
<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
  <!-- 导航栏内容 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 其他内容 -->
</nav>

然后在CSS里覆盖背景色：

.navbar-custom {
  background-color: #你的自定义颜色; /* 比如 #2c3e50 */
}

方法2：手动给汉堡图标设置样式（不保留基础类） #

如果你坚持要移除navbar-light/navbar-dark，就需要手动指定汉堡图标的颜色和边框颜色：

/* 设置汉堡图标线条颜色 */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* 设置汉堡按钮边框颜色（可选） */
.navbar-toggler {
  border-color: rgba(255, 255, 255, 1);
}

把上面的rgba(255,255,255,1)换成和你导航栏背景色对比强烈的颜色即可（比如深色背景用白色，浅色背景用黑色）。

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