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

Question

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

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

这很好,但我也试图利用Bootstrap(3.1.1)来使网站响应和组件/样式.但是我不知道该怎么做.

基本上,我理想地喜欢使用Bootstrap约定(列类等)来使它在移动屏幕上右窗格在左窗格下方折叠(或完全消失)以用于传统的垂直布局,同时占用全屏宽度.但是,在absolute为更大的屏幕布局使用定位时,似乎不可能这样做.

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

Answer 1

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

<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>

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

Answer 2

我在使用and 时在这里分叉了 Skelly 的 bootply 。col-xs-12hidden-xs

  <div class="col-xs-12 col-sm-6" id="left">
      <p>Left contents</p>
  </div>   
  <div class="hidden-xs col-sm-6" id="right">
      <p>Right contents</p>
  </div>

我更喜欢这个，因为它避免了 css 文件中的媒体查询。