bootstrap 如何隐藏左边菜单栏

下面代码是一个模板页面，bootstrap如何控制点击按钮，左边菜单栏隐藏，右边内容自动扩大

     <!-- topbar ends -->
<div class="ch-container">
    <div class="row">


        <!-- left menu starts -->
        <div class="col-sm-2 col-lg-2" style="padding-left:0px;padding-right:0px;">
            <div class="sidebar-nav">
                <div class="nav-canvas">
                    <div class="nav-sm nav nav-stacked">

                    </div>
                    <ul class="nav nav-pills nav-stacked main-menu">
                        <li class="nav-header">#springMessage("main")</li>
                        #menubar($!{menus},$selectedMenu)
                    </ul>
                </div>
            </div>
        </div>
        <!--/span-->
        <!-- left menu ends -->

        <noscript>
            <div class="alert alert-block col-md-12">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>
                    enabled to use this site.</p>
            </div>
        </noscript>
        <div id="content" class="col-lg-10 col-sm-10"  style="margin-top:10px">
           $screen_content   
        </div>
</div><!--/fluid-row-->