合并两个模板

Question

我正在制作两个模板：
第一个是：简单侧边栏引导模板
第二个：Isotope Bootstrap模板（动态过滤 - 布局 - 同位素 - 自举）。

我将第二个模板的代码放在bootstrap模板文档中提到的“#page-content-wrapper”中。到目前为止，我能够实现这一目标

http://codepen.io/argupta2301/pen/rOajEX

我面临的问题是侧边栏的切换操作。每当我点击切换菜单时，包装器中的布局都不会调整整个窗口的宽度，而是保持不变。在我的电脑上，我首先看到3列，当我点击切换时，列保持不变，但它们必须根据新的宽度增加。侧边栏切换效果和div的布局工作得很好，但是我希望它们在我点击切换按钮之后调整窗口的宽度，就像调整宽度的文字一样。

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            ....
        </ul>
    </div>
    <!-- sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="container group">
                           <ul class="nav navbar-nav navbar-left" id="controls">
                               <li><a href="#cat1">Category 1</a></li>
                               <li><a href="#cat2">Category 2</a></li>
                               <li><a href="#cat3">Category 3</a></li>
                           </ul>
                        </div>
                    </nav>
                    <p>This template........Make sure to keep all page content within the #page-content-wrapper.</p>
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

                   <section id="main" class="row">
                        <div class="box cat1 cat2">
                            <p>Odd future 3 wolf moon twee, cliche marfa post-ironic pop-up master cleanse next level pickled gentrify. Direct trade small batch YOLO, pitchfork lomo PBR high life intelligentsia readymade letterpress flexitarian tousled. Direct trade pitchfork hoodie twee, yr pour-over Austin marfa 90's flexitarian food truck mlkshk helvetica +1 trust fund.</p>
                        </div>
                        .....
                   </section>
               .....
     </div>