jquery - 具有可折叠侧栏的自举式三列布局

正在寻找使用引导3为一个特定的布局，但我不太确定最好的方式来实现这一点。
我想要一个三列的布局

<div class="container">
  <div class="row">
   <div class="col-md-2">Left Hand Panel</div>
   <div class="col-md-8">Main Panel</div>
   <div class="col-md-2">Right Panel</div>
 </div>
</div>

我希望能够折叠侧面板，并调整主面板，以采取可用的房间。
我不确定如何用引导来实现这类任务，我想要在面板之间有一个小的拆分器，允许用户切换面板状态。
我不知道如何在网格系统中实现这一点

最佳答案

这很棘手，因为Bootstrap的文档中没有这个（我不知道）
我建议您先创建桌面或大屏幕布局，然后再创建移动布局，这将是：
桌面：

<div class="container desktop">
  <div class="row">
   <div class="col-md-2">Left Hand Panel</div>
   <div class="col-md-8">Main Panel</div>
   <div class="col-md-2">Right Panel</div>
 </div>
</div>

平板电脑和手机：

<div class="container tablet-mobile">
  <div class="row">
   <div class="col-md-2">Main Panel</div>
   <div class="col-md-8">Left Hand Panel</div>
   <div class="col-md-2">Right Panel</div>
 </div>
</div>

此后，您可以隐藏.tablet-mobilediv：

.tablet-mobile{display: none;}

然后根据平板电脑和手机的媒体查询显示：

@media only screen and ( max-width: 830px ) {
        .tablet-mobile{display:block;}
        .desktop{display:none;}

}