Question

希望将Bootstrap 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实现这种behvaiour，我想在面板之间使用某种小分割器，这将允许用户切换面板状态。

我无法看到如何使用网格系统实现这一点

Answer 1

这非常棘手，因为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>

平板电脑＆amp;移动：

<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-mobile div：

.tablet-mobile{display: none;}

然后，您可以根据平板电脑和手机的媒体查询显示它：

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

}

Answer 2

你想要这样的东西看JsFiddle..

<强> HTML

<div id="Tabs">
    <ul>
        <li><a href="#Div1">col-md-2</a></li>
        <li class="end"><a href="#Div2" style="width: 82px !important">col-md-8</a></li>
        <li class="end"><a href="#Div3" style="width: 82px !important">col-md-2</a></li>
    </ul>
    <div>
        <div id="Div1" style="color: Black !important;">
            <div class="bg">
                Div 1
            </div>
        </div>
        <div id="Div2" style="color: Black !important;">
            <div class="bg">
                Div 2
            </div>
        </div>
        <div id="Div3" style="color: Black !important;">
            <div class="bg">
                Div 3
            </div>
        </div>
    </div>
</div>

<强> JQUERY

$(document).ready(function () {
            $("#Tabs").tabs();

            $("#close").click(function () {
                $("#Tabs").tabs({
                    hide: {
                        effect: "fade",
                        duration: 500
                    },
                    show: {
                        effect: "fade",
                        duration: 500
                    },
                    collapsible: true,
                    active: false
                });
            });
        });

Bootstrap三列布局与可折叠侧栏

2 个答案: