Question

为现有产品处理新的网页布局。我们希望集成的团队聊天和活动Feed显示始终显示在每个页面的右侧。我们正在使用Bootstrap 3，而且我有一个非常好的模拟器。我使用vanilla Bootstrap 12列大小调整样式来执行此操作：

current mock with right-side panel displayed

现在我们希望允许用户折叠右侧面板（水平），特别是对于水平不动产很重要的视图（网格视图等）。

有没有Bootstrap方法来做到这一点？我可以使用垂直分割器小部件，或顶部导航中的切换按钮，或任何其他有意义的演示文稿。我需要建议的是网格大小。

Answer 1

我需要对我们的某个项目采用类似的方法，全屏视图为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以获得您想要的内容。

Answer 2

我刚刚完成了我想你想要的jquery添加和删除bootstrap类。我有一个标识为collapse的按钮，单击它时会检查侧边栏是否打开并更改布局。标记：

<div class="container">
    <div class="row">
        <div class="row">
            <div class="col-md-12"><button class="btn-primary btn-large btn" id="collapse">Collapse sidebar</button></div>
        </div>
        <div class="row">
            <div class="col-md-8" id="content" style="height:400px;border:2px solid black">Hello, I'm a 3/4 width Div.</div>
            <div class="col-md-4 open" id="sidebar"  style="height:400px;border:2px solid blue">Hey There, I'm a 1/4 width Div</div>
        </div>
    </div>
</div>

jQuery：

$('#collapse').click(function(){
    if($('#sidebar').hasClass('open'))
    {
        $('#sidebar').removeClass('col-md-4');
        $('#sidebar').removeClass('open');
        $('#sidebar').addClass('hidden');
        $('#content').addClass('col-md-12');
        $('#content').removeClass('col-md-8');
    }
    else
    {
        $('#sidebar').addClass('col-md-4');
        $('#sidebar').addClass('open');
        $('#sidebar').removeClass('hidden');
        $('#content').removeClass('col-md-12');
        $('#content').addClass('col-md-8');
    }
});

我唯一的css是一个隐藏的类.hidden{display:none;}和fiddle.我因为小窗口而在小提琴中使用了xs。但工作原理相同。

Answer 3

我已经为2个项目使用了布局插件，这对我帮助很大，它可以为你提供全面的控制。我的情况也需要左，右和底。链接是，

http://layout.jquery-dev.net/

我也使用bootstrap3并且在使用bootstrap模式时明智地使shur在身体标签之后立即放置该代码

快乐的编码。

Bootstrap 3 - 可折叠的右侧面板，如Google Drive Details / Activity面板

3 个答案: