Bootstrap 引导左右侧栏问题

bqjvbblv 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(205)

我正在尝试创建具有以下功能的页面：
1.有一个左侧边栏。这个边栏可以用一个按钮切换打开或关闭。
1.有一个右侧边栏。这个边栏可以用一个按钮切换打开或关闭。
1.有一个主内容区域。当一个或多个侧栏隐藏时，主内容区域会展开以填充空白。当两个侧栏都打开时，它看起来如下所示：

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

另一个问题是，主要内容区域实际上由3列组成-左、主、右。当显示一个或两个侧栏时，左和右内容区域将隐藏，而主内容区域将扩展以填充空白。因此，内容列看起来如下所示：

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

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

无论我做什么-我都不能让它接近工作。
backbone 是靴形的

twitter-bootstrap

来源：https://stackoverflow.com/questions/25437344/bootstrap-left-and-right-sidebar-issues

2条答案

按热度按时间

ne5o7dgx1#

试试这个：
我的天啊
CSS：

div {
        border:2px solid;
    }

于飞：

<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");
            }
        }

赞(0）回复(0）举报 2022-12-07

tpgth1q72#

@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");
        }
    }

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 引导左右侧栏问题

2条答案

相关问题

热门标签

最新问答