Bootstrap小屏幕导航栏点击时切换图标问题求助

你好呀！刚接触编码遇到这种小问题很正常，别着急～Bootstrap 4默认的导航栏汉堡图标是不会自动切换样式的，得我们自己加一点简单的CSS和调整下HTML就能实现你想要的效果，下面一步步来帮你解决：

问题原因 #

Bootstrap 4的.navbar-toggler按钮在点击展开菜单时，只会自动添加/移除collapsed类，但默认的汉堡图标是通过背景图实现的，不会跟着这个类的变化自动切换样式，所以我们需要借助这个类来控制图标的切换。

解决方案（利用你已经引入的Font Awesome） #

因为你已经引入了Font Awesome图标库，我们直接用它的汉堡和叉号图标来替换默认的导航栏图标，再通过CSS控制显示状态：

1. 修改导航栏按钮的HTML
   把原来的默认图标代码替换成两个Font Awesome图标：

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <i class="fas fa-bars"></i> <!-- 汉堡图标 -->
  <i class="fas fa-times"></i> <!-- 叉号图标 -->
</button>

注意：这里给按钮加上了默认的collapsed类，确保初始状态显示汉堡图标

2. 添加CSS样式控制图标显示
   在你的styles.css文件里加入以下代码：

/* 默认显示汉堡图标，隐藏叉号 */
.navbar-toggler .fa-times {
  display: none;
}
/* 当按钮处于收起状态（collapsed类存在）时，显示叉号，隐藏汉堡 */
.navbar-toggler.collapsed .fa-times {
  display: inline-block;
}
.navbar-toggler.collapsed .fa-bars {
  display: none;
}

原理：Bootstrap会在点击按钮时自动给按钮移除/添加collapsed类，我们利用这个类的变化来切换两个图标的显示状态。

3. 验证JS依赖
   你已经正确引入了jQuery、Popper.js和Bootstrap的JS文件，这部分没问题，Bootstrap会自动处理按钮的状态切换逻辑。

修改后的完整代码片段（导航栏部分） #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fas fa-bars"></i>
    <i class="fas fa-times"></i>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <!-- 你的导航列表内容保持不变 -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Office <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Windows<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Xbox<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Support<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All Microsoft</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li>
        <a href="#" class="user"><i class="fas fa-search"></i></a>
      </li>
      <li>
        <a href="#" class="user"><i class="fas fa-shopping-cart"></i></a>
      </li>
      <li>
        <a href="#" class="user"><i class="far fa-user-circle"></i></a>
      </li>
    </ul>
  </div>
</nav>

这样修改后，你点击小屏幕的导航栏图标时，就会在汉堡和叉号之间切换啦～如果还有其他问题随时问哦！

备注：内容来源于stack exchange，提问作者Gaji Abraham Ali