html - Bootstrap 4 - 自定义动画汉堡包图标在页面加载时关闭？

Question

我可能正在使用以下 default-toggler 以更老派的方式进行引导，但我无法弄清楚为什么我的自定义编辑会强制按钮加载关闭？

[As in ' X ']

这很可能是菜鸟犯的错误，而且我对 BS4 显示缺乏经验，但如果有人能提供一些建议，我将不胜感激。

这是一个 demo JS Fiddle包含我的完整编辑。

HTML

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
   <span class="icon-bar top-bar"></span>
   <span class="icon-bar middle-bar"></span>
   <span class="icon-bar bottom-bar"></span>
   <span class="sr-only">Toggle navigation</span>
</button>

CSS

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

.navbar-toggler .icon-bar {
  background-color: #fff;
  transform: rotate(0deg) translate(0px, 0px);
  transition: ease all .2s;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggler .icon-bar + .icon-bar {
  margin-top: 4px;
}

.icon-bar:nth-child(2) {
  width: 16px;
  transition: ease all .2s;
}

.navbar-toggler:hover > .icon-bar:nth-child(2){
  width: 22px;
  transition: ease all .2s;
}
.navbar-toggler:active > .icon-bar:nth-child(2){
  width: 22px;
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 4px);
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
  opacity: 0;
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
  transition: ease all .2s;
}

我能得到的任何帮助都非常棒，非常感谢。

问候，-B。

Answer 1

要达到预期的效果，请为按钮使用折叠类

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

代码示例 - https://jsfiddle.net/Nagasai_Aytha/k1nz4L3h/6/