为现有产品开发新的网页布局.我们希望集成的团队聊天和活动Feed显示将始终显示在每个页面的右侧.我们使用的是Bootstrap 3,我有一个看起来不错的模拟器.我使用香草Bootstrap 12列尺寸样式来做到这一点：
现在我们想允许用户折叠右侧面板(水平),特别是对于水平房地产重要的视图(网格视图等).
有没有Bootstrap的方法来做到这一点？我可以使用垂直分割器小部件,或顶部导航栏中的切换按钮,或任何其他演示都是有意义的.更多的是网格调整,我需要建议.
解决方法
我需要一个类似的方法,我们的一个项目,全屏视图是
here.
我修改了脚本和布局,以获得你想要实现的内容. here是代码,全屏是here.即使在页面刷新后,我也使用jquery cookie来保留视图状态.点击Cog图标将切换边栏.脚本是：
$(function () {
var $menu = $('#sidebar-wrapper');
var $content = $('#main-wrapper');
if ($.cookie('offcanvas') == 'hide') {
$content.addClass('no-transition');
$menu.hide();
$menu.css('right',-($menu.outerWidth() + 10));
$content.removeClass('col-md-10').addClass('col-md-12');
}
else if ($.cookie('offcanvas') == 'show') {
$menu.show(500).animate({ right: 0 });
// $menu.show();
$content.removeClass('no-transition');
$content.removeClass('col-md-12').addClass('col-md-10');
}
$('.toggle-button').click(function () {
$content.removeClass('no-transition');
if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
// Slide out
$menu.animate({
right: -($menu.outerWidth() + 10)
},function () {
$menu.hide(1000);
});
$content.removeClass('col-md-10').addClass('col-md-12');
$.cookie('offcanvas','hide');
}
else {
// Slide in
$menu.show(500).animate({ right: 0 });
$content.removeClass('col-md-12').addClass('col-md-10');
$.cookie('offcanvas','show');
}
if ($content.hasClass('col-md-12') && $menu.is(':hidden')) {
$menu.animate({
right: 0
},function () {
$menu.show(1000);
});
// $menu.show();
$content.removeClass('no-transition');
$content.removeClass('col-md-12').addClass('col-md-10');
}
});
$('.bs-tooltip').tooltip();
});
您可以自定义布局/ css,以获得您想要获得的结果.
