我刚刚访问了此页面http://www.elmastudio.de/并想知道是否可以使用 Bootstrap 3 构建左侧边栏折叠。
从顶部折叠侧边栏的代码(仅限手机):
<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
<span class="sr-only">Sidebar</span>
<span class="glyphicon glyphicon-check"></span>
</button>
侧边栏本身具有hidden-xs类。用下面的js去掉
$('.sidebar-toggle').click(function(){
$('#sidebar').removeClass('hidden-xs');
});
如果单击该按钮,它将从顶部切换侧边栏。很高兴看到侧边栏的行为如上面网站所示。如有任何帮助,我们将不胜感激!
最佳答案
Bootstrap 3
是的,这是可能的。这个“ Canvas 外”示例应该有助于您入门。
https://codeply.com/p/esYgHWB2zJ
基本上,您需要将布局包装在外部 div 中,并使用媒体查询在较小的屏幕上切换布局。
/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -41.6%;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
#sidebar {
padding-top:0;
}
}
此外,还有几个more Bootstrap sidebar examples here
<小时/>Bootstrap 4
关于bootstrap-4 - 使用 Bootstrap 折叠侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19397140/