Question

我目前正使用Bootstrap为我的网站left sideBar navigation。

在main content，我有2个容器，用于left和right内容。

What I want is like the image below and i already done this:

and when the toggle button is clicked then the `rightDiv` will resize 
which is my main problem and i'm not able to do:

and when the browser/device is small lets say mobile device then it be 
like this and i already done this.

我能够拍摄第一张和第三张图片，但在第二张图片上失败，这会调整点击切换按钮上rightDiv的大小。

到目前为止，我的HTML中有这个：

<div id="wrapper">
        <!--Start of Sidebar navigation -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li>
                    <a href="#"><span>Home</span></a>
                </li>
                ....
            </ul>
        </div>
        <!-- End of Sidebar navigation-->
        <!-- Start Main Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <!--START OF LEFT DIV-->
                    <div class="row-post-container">
                    </div>
                    <!--END OF LEFT DIV-->
                </div>
                <!--START OF RIGHT DIV-->
                <div class="main-right-side-container">
                    <div class="right-side-container">
                        ....
                    </div>
                </div>
                <!--END OF RIGHT DIV-->
                </div>
            </div>
        </div>
        <!-- END Main Content -->
    </div>

在我的CSS中，我有这个用于DIV的左右侧边栏：

.row-post-container{
    display: table-cell;
    float: left;
    max-width: 800px;
    width: 100%;
    min-width: 300px;
    margin-right: 20px;
}.main-right-side-container{
    display: table-cell;   
    min-width: 300px;
    width: 100%;
    max-width: 300px;
    vertical-align: top;
    height: 300px;
    float: left;
    padding: 0px;
    margin-top: 20px;
}

有人有想法吗？

如需更多说明，请问我。

请仅建议使用CSS。

非常感谢你。

编辑：橙色为leftDiv，橙色右侧为深绿色为RightDiv。

Answer 1

您不考虑的主要问题之一是具有引导列。

我修改了您给我的示例链接并复制了两列而不是一列。默认情况下，这是示例中代码的当前骨架或更确切的结构 -

示例网站上的当前实施

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <!-- your code here -->
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>

更改以添加如下所示的列

在这里，我建议您继续添加更多类似的列 -

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-8"> <!-- your leftDiv code here --> </div>
                <div class="col-lg-4"> <!-- your rightDiv code here --> </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

Answer 2

首先尝试充分利用bootstrap类，检查一下 -

HTML -

<p><input type="button" id="showHideBtn" value="Slide Menu"></p>

<div id="sidebar-wrapper col-md-3">
    <ul class="sidebar-nav">
        <li>
            <a href="#"><span>Home</span></a>
        </li>
        ....
    </ul>
</div>

<div id="page-content-wrapper" class="col-md-9">
    <div class="container-fluid">
        <div class="row">
            <!--START OF LEFT DIV-->
            <div class="col-xs-12 col-md-9 row-post-container">
            </div>
            <!--END OF LEFT DIV-->

        <!--START OF RIGHT DIV-->
            <div class="col-xs-12 col-md-3 main-right-side-container">
            </div>
        <!--END OF RIGHT DIV-->
        </div>
    </div>
</div>

CSS -

.hide{display:none !important;}

JS -

$('#showHideBtn').click(function(e){
    $('#sidebar-wrapper').toggleClass('hide');
    if($('#page-content-wrapper').hasClass('col-md-9')){
        $('#page-content-wrapper').removeClass('col-md-9');
    }else{
        $('#page-content-wrapper').addClass('col-md-9');
    }
});

CSS - 左右DIV，宽度为100％

2 个答案: