Bootstrap 左右侧边栏问题

Question

我正在尝试创建具有以下功能的页面：

1. 有一个左侧边栏。可以使用按钮打开或关闭此侧边栏。
2. 有一个右侧边栏。可以使用按钮打开或关闭此侧边栏。
3. 有一个主要内容区域。当隐藏一个或多个侧边栏时，主要内容区域会扩大以填补空白。当两个侧边栏都打开时，它看起来像这样：

----------------------------------------------------
|   Sidebar-Left  |  Content      |  Sidebar-right |
----------------------------------------------------

• 作为一个额外的皱纹，主要内容区域实际上由 3 列组成 - 左、主、右。当显示其中一个或两个侧边栏时，左侧和右侧内容区域被隐藏，主要内容区域扩展以填充空白。因此，内容列看起来像这样：

---------------------------------------------------------
|   Left-Content  |  Main-Content      |  Right-Content |
---------------------------------------------------------

• 最后，打开/关闭按钮将在整个项目上方的导航栏中向左和向右拉，这将是一个流体容器 - 列之间没有填充。

无论我做什么 - 我都无法接近工作。

骨架是bootyply 或fiddle

Answer 1

试试这个：

LIVE_DEMO

CSS：

    div {
        border:2px solid;
    }

HTML：

    <div class="row">
        <div id="DivLeft" class="col-md-3">
            left Side bar
        </div>
        <div id="DivMain" class="col-md-6">
            <div id="DivLeftContent" class="col-md-4">
                Left Content
            </div>
            <div id="DivMainContent" class="col-md-4">
                Main Content
            </div>
            <div id="DivRightContent" class="col-md-4">
                Right Content
            </div>
        </div>
        <div id="DivRight" class="col-md-3 ">
           right Side bar 
        </div>
    </div>

脚本：

 $(document).ready(function () {
            MainDiv();
        });

        var right = 0, left = 0;
        $("#BtnRight").click(function () {
            if (right == 0) {
                $("#DivRight").hide();
                right = 1;
                if (left == 0) {
                    $("#DivMain").removeClass().addClass("col-md-9");
                } else {
                    $("#DivMain").removeClass().addClass("col-md-12");
                }
            } else {
                $("#DivRight").show();
                right = 0;
                if (left == 0) {
                    $("#DivMain").removeClass().addClass("col-md-6");
                } else {
                    $("#DivMain").removeClass().addClass("col-md-9");
                }
            }
            MainDiv();
        });
        $("#BtnLeft").click(function () {
            if (left == 0) {
                $("#DivLeft").hide();
                left = 1;
                if (right == 0) {
                    $("#DivMain").removeClass().addClass("col-md-9");
                } else {
                    $("#DivMain").removeClass().addClass("col-md-12");
                }
            } else {
                $("#DivLeft").show();
                left = 0;
                if (right == 0) {
                    $("#DivMain").removeClass().addClass("col-md-6");
                } else {
                    $("#DivMain").removeClass().addClass("col-md-9");
                }
            }
            MainDiv();
        });

        function MainDiv() {
            if (left == 1 && right == 1) {
                $("#DivLeftContent,#DivRightContent").hide();
                $("#DivMainContent").removeClass().addClass("col-md-12");
            } else {
                $("#DivLeftContent,#DivRightContent").show();
                $("#DivMainContent").removeClass().addClass("col-md-4");
            }
        }

Answer 2

@Jake745，很棒的方法。谢谢。只需对 MainDiv 函数进行一些更改即可获得我正在寻找的确切行为：

function MainDiv() {
        if (left == 1 && right == 1) {
            $("#DivLeftContent,#DivRightContent").show();
            $("#DivMainContent").removeClass().addClass("col-md-4");
        } else {
            $("#DivLeftContent,#DivRightContent").hide();
            $("#DivMainContent").removeClass().addClass("col-md-12");
        }
    }