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

Question

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

[如'X']

这可能是一个菜鸟错误和我对BS4显示的经验不足,但如果有人能提供一些建议,我将不胜感激.

下面是一个演示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/