html - CSS - 如何编码流畅的 DIV 列，以响应 Bootstrap 3 的显示变化？

Question

我遇到了一个简单的布局问题:

基本上，我的目标是创建一个可切换的侧边菜单。当侧边菜单可见时，主布局的宽度为 80%，当它不可见时，主布局的宽度为 100%，如下所示:

我正在使用 bootstrap 3 并想使用他们的 CSS 标记，因此我可以将行和列添加到主 div(图中的 Lt-orange)。

任何帮助将不胜感激:)

编辑:

这是我目前的进展:

<div class="container">
<div id="sidebar" style="border:solid 1px;width:20%;float:left">SIDEBAR</div>
<div style="border:solid 1px;width:100%">
    <div style="border:solid 1px red">
        <div class="row">
            <div class="col-lg-6">Some Content</div>
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-12">Some content</div>
                </div>
            </div>
        </div>
    </div>
</div>

<button onclick="document.getElementById('sidebar').style.display = document.getElementById('sidebar').style.display == 'none' ? 'block':'none'">TOGGLE</button>

Demo

Answer 1

实际上，您不能使用 20%，因为 bootstrap 网格大小适用于 12s。这意味着 100%=12/12 所以 1/12 是 8,33% 是最小单位。最接近你的是侧边栏3/12=25%。为您提供代码:

<div class="row">
  <div class="col-xs-12 col-sm-3">
    sidebar content
  </div>
<div class="col-xs-12 col-sm-9">
    main content here
  <div class="row">
    <div class="col-xs-12">
      your 100% main content here
    </div>
  </div
</div>

我假设底部的照片显示了它在移动设备上的外观......？