html - 如何在 Bootstrap 中实现响应式、独立滚动的 Pane ？

Question

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

我已经设法使用 absolute 定位和 overflow 属性在 CSS 中实现了这样的布局，请参阅此 JSFiddle:http://jsfiddle.net/XLceP/

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

基本上，理想情况下，我希望使用 Bootstrap 约定(列类等)，以便在移动屏幕上，右 Pane 折叠在左 Pane 下方(或完全消失)以实现传统的垂直布局，同时占据整个宽度。然而，在为较大的屏幕布局使用 absolute 定位时似乎不可能做到这一点。

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

Answer 1

2019 年更新

Bootstrap 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

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%;
  }
}

演示:http://bootply.com/126137