我可能正在使用以下 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。
最佳答案
要达到预期的效果,请为按钮使用折叠类
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
关于html - Bootstrap 4 - 自定义动画汉堡包图标在页面加载时关闭?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49710238/