Bootstrap 4移动导航栏从左侧滑动
我正在使用最新版本的bootstrap。 我自己尝试了各种各样的东西，之后我想我可能会在stackoverflow上找到一些东西。 但善良并没有得到这个东西。 我的意思是它如何运作？
这是我的代码。 我不会在这里添加任何自定义样式，因为它们并没有真正起作用，反而他们创建了一些错误。
我还检查了这篇文章也Bootstrap – 如何从左边而不是从顶部滑动导航栏我尝试了所有的答案，但它不适合我。
你可以像这样覆盖navbar-collapse的过渡样式……
演示
@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; } }
演示
实际上，您可以使用@Hrvoje Golcic的解决方案来实现左侧滑动效果。
我检查了你的代码并解决了一些问题。 请检查以下代码段。 您可能需要定义更多CSS规则来设置导航栏的样式。
$(function(){ // mobile menu slide from the left $('[data-toggle="slide-collapse"]').on('click', function() { $navMenuCont = $($(this).data('target')); $navMenuCont.animate({'width':'toggle'}, 280); }); })
#navbarCollapse { position: fixed; top: 0; left: 0; z-index: 1; width: 280px; /*example + never use min-width with this solution */ height: 100%; background: #000; }