Bootstrap4导航栏图标动画异常：点击汉堡图标后X图标位置错误

嘿，我来帮你搞定这个X图标跑左边的问题！这个情况主要是你自定义的动画和Bootstrap默认的导航栏切换按钮样式冲突了，尤其是transform属性叠加导致的位置偏移，咱们一步步来修复：

1. 调整动画CSS，解决旋转冲突 #

你之前给整个图标容器加了旋转动画，这和Bootstrap默认的按钮定位叠加后就跑偏了，咱们修改自定义CSS，只针对图标里的线条做动画：

.navbar-toggler {
  border: none;
  background: transparent !important;
}

.navbar-toggler:focus {
  outline: none;
  background: transparent !important;
}

.navbar-toggler .animated-icon2 {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.navbar-toggler .animated-icon2 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  background: #e3f2fd;
}

.navbar-toggler .animated-icon2 span:nth-child(1) {
  top: 0px;
}

.navbar-toggler .animated-icon2 span:nth-child(2),
.navbar-toggler .animated-icon2 span:nth-child(3) {
  top: 10px;
}

.navbar-toggler .animated-icon2 span:nth-child(4) {
  top: 20px;
}

/* 关键修改：去掉容器的旋转，只处理单个线条的动画 */
.navbar-toggler:not(.collapsed) .animated-icon2 span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
}

.navbar-toggler:not(.collapsed) .animated-icon2 span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.navbar-toggler:not(.collapsed) .animated-icon2 span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.navbar-toggler:not(.collapsed) .animated-icon2 span:nth-child(4) {
  top: 11px;
  width: 0%;
  left: 50%;
}

2. 确保导航栏结构符合Bootstrap规范 #

检查你的导航栏HTML结构，保证.navbar-toggler没有被额外的自定义样式（比如float:left、position:absolute）改变定位，保持默认的右侧对齐：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="animated-icon2"><span></span><span></span><span></span><span></span></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <!-- 其他导航项保持不变 -->
    </ul>
  </div>
</nav>

3. 验证效果 #

修改完之后再点击汉堡图标，X图标就会乖乖待在原来汉堡图标的右侧位置，动画效果也能正常运行啦！

简单说下原因：之前你给整个图标容器加了rotate(180deg)，但Bootstrap的切换按钮默认是靠右对齐的，旋转后就会导致视觉偏移。现在咱们只针对图标里的线条做旋转和隐藏，容器本身保持位置不变，就解决了这个问题。

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