如何在Bootstrap中实现响应式、独立滚动的窗格？

我正在开发一个网络应用程序，我希望在较大的屏幕上有两个独立的可滚动区域：左侧的主要内容区域和右侧的较小侧边栏。

我已经成功地使用 CSS 实现了这样的布局absolute定位和overflow属性，请参阅这个 JSFiddle：http://jsfiddle.net/XLceP/ http://jsfiddle.net/XLceP/

这很棒，但是我也尝试使用 Bootstrap (3.1.1) 以使网站具有响应能力和组件/样式。但是我不知道该怎么做。

基本上，我理想地希望使用 Bootstrap 约定（列类等）来实现，以便在移动屏幕上，右窗格折叠到左窗格下方（或完全消失），以实现传统的垂直布局，两者都占用全屏宽度。然而，在使用时似乎不可能做到这一点absolute更大屏幕布局的定位。

我该如何尝试解决这个问题？

2019年更新

引导程序4

现在 Bootstrap 4 使用flexbox，您可以使用 flex-grow 和新的溢出实用程序类来进行此布局。这最大限度地减少了 BSv3 之前所需的额外 CSS...

<div class="container-fluid d-flex flex-column flex-grow-1 vh-100 overflow-hidden">
    <nav class="navbar navbar-light bg-light navbar-expand-md px-0 flex-shrink-0">
        <a class="navbar-brand" href="#">App</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Nav</a></li>
        </ul>
    </nav>
    <div class="row flex-grow-1 overflow-hidden">
        <div class="col-2 mh-100 overflow-auto py-2">
            <h6>Sidebar</h6>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
        <div class="col mh-100 overflow-auto py-2">
            <h3>Body content</h3>
        </div>
    </div>
    <div class="row flex-shrink-0 bg-light">
        <div class="col-12 py-2">
            <p>Footer ...</p>
        </div>
    </div>
</div>

https://codeply.com/go/LIaOWljJm8 https://codeply.com/go/LIaOWljJm8

Bootstrap 3（原始答案）

您可以使用 CSS 媒体查询来“禁用”移动屏幕上的绝对定位。这将使 Bootstrap 的响应能力发挥作用......

@media (min-width: 768px){
  #left {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    width: 75%;
    overflow-y: scroll; 
  }
  
  #right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    width: 25%;
  }
}

Demo: http://bootply.com/126137 http://bootply.com/126137