jquery – Bootstrap 3 – 可折叠的右侧面板,如Google Drive Details / Activity面板

为现有产品开发新的网页布局.我们希望集成的团队聊天和活动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,以获得您想要获得的结果.