jquery – Bootstrap 4移动导航栏从左侧滑动

我正在使用最新版本的bootstrap.我自己尝试了各种各样的东西,之后我想我可能会在stackoverflow上找到一些东西.但善良没有得到这个东西.我的意思是它如何运作？

这是我的代码.我不会在这里添加任何自定义样式,因为它们没有真正起作用,反而他们创建了一些错误.

我也检查了这篇文章也Bootstrap – How to slide nav bar from left instead from top我从那里尝试了所有答案,但它对我不起作用.

最佳答案

你可以像这样覆盖navbar-collapse的过渡样式……

Demo

@media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
    }
    .navbar-collapse.collapsing {
        height: auto;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }
    .navbar-collapse.show {
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
    }
}

Demo – slide from right
Demo – slide from left