Question

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

[如'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/

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

1 个答案: