移动端navbar导航栏如何在折叠和展开状态显示不同图标

问题解决方法 #

你的CSS规则逻辑与Bootstrap导航栏的类切换规则不匹配，修正步骤如下：

1. 先明确Bootstrap自带的交互逻辑：

• 导航栏默认折叠时，navbar-toggler按钮会自动带上collapsed类
• 点击展开导航栏后，collapsed类会被自动移除

2. 替换为如下正确的CSS规则即可实现效果：

/* 导航栏展开状态（按钮无collapsed类）：显示叉号，隐藏汉堡图标 */
.navbar-toggler .fa-times {
  display: inline-block;
}
.navbar-toggler .fa-bars {
  display: none;
}

/* 导航栏折叠状态（按钮有collapsed类）：显示汉堡图标，隐藏叉号 */
.navbar-toggler.collapsed .fa-times {
  display: none;
}
.navbar-toggler.collapsed .fa-bars {
  display: inline-block;
}

3. 补充注意事项：

• 如果你使用的是Bootstrap 5版本，需要把按钮上的data-toggle改成data-bs-toggle、data-target改成data-bs-target，否则折叠交互不会生效，类切换也不会触发。
• 确保你已经正确引入了Bootstrap的JS文件，导航栏的折叠交互依赖Bootstrap的JS实现。

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