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

【问题标题】：How to implement responsive, independently scrolling panes in Bootstrap?如何在 Bootstrap 中实现响应式、独立滚动的窗格？
【发布时间】：2021-05-27 02:31:13
【问题描述】：

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

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

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

基本上，我希望使用 Bootstrap 约定（列类等）来实现，以便在移动屏幕上，对于传统的垂直布局，右窗格折叠在左窗格下方（或完全消失），两者都有占据整个宽度。但是，在将absolute 定位用于更大的屏幕布局时，似乎无法做到这一点。

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

【问题讨论】：

标签： html css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

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

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

【讨论】：

谢谢，这为我解决了问题。我还需要确保body, html 上的overflow: hidden 也在该媒体查询中，否则一旦它们折叠我将无法正常滚动，以及height: 100%，因为这也会导致问题。跨度>
但是如果我需要 3 列？
太棒了，你成就了我的一天。谢谢。

【解决方案2】：

我在使用 col-xs-12 和 hidden-xs 时分叉了 Skelly 的 bootply here。

  <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 文件中的媒体查询。

【讨论】：

【解决方案3】：

你不需要 Bootstrap 来做你想做的事。您可以简单地将现有的 CSS 修改为以下内容：

#left {
  float: left;
  width: 75%;
  height: 100px;
  overflow-y: scroll;
  background-color: #FC6E51;
  text-align: center;
}

#right {
  float: left;
  overflow-y: scroll;
  height: 100px;
  width: 25%;
  background-color: #4FC1E9;
  text-align: center;
}

然后，在移动屏幕的媒体查询中，使 #left 和 #right 都为 flow:none, width: 100% 和 height: auto;

如果你真的想使用 Bootstrap，只需将 #left 和 #right 都放在以下结构中：

<div class="row">
    <div class="col-md-8" id="left">Your Code Here</div>
    <div class="col-md-4" id="right">Your Code Here</div>
</div>

【讨论】：