Html 如何在 Bootstrap 3 中实现响应式、独立滚动的窗格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22752637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement responsive, independently scrolling panes in Bootstrap 3?
提问by Inkling
I'm working on a web app for which I want to have two independently scrollable areas on larger screens: a main content area on the left, and a smaller sidebar on the right.
我正在开发一个网络应用程序，我希望在较大的屏幕上有两个独立的可滚动区域：左侧的主要内容区域和右侧的较小侧边栏。
I've managed to implement such a layout in CSS using absolutepositioning and overflowproperties, see this JSFiddle: http://jsfiddle.net/XLceP/
我已经设法使用absolute定位和overflow属性在 CSS 中实现了这样的布局，请参阅此 JSFiddle：http: //jsfiddle.net/XLceP/
This is great, however I'm also attempting to make use of Bootstrap (3.1.1) in order to make the site responsive and for the components/styling. However I'm at a loss at how to do so.
这很棒，但是我也在尝试使用 Bootstrap (3.1.1) 来使站点具有响应性和组件/样式。但是，我不知道该怎么做。
Basically, I'd ideally like to use Bootstrap conventions (the column classes etc.) to make it so that on mobile screens the right pane collapses below the left pane (or disappears entirely) for a conventional vertical layout, with both taking up the full width. However it seems impossible to do this while using absolutepositioning for the larger screen layout.
基本上，我希望使用 Bootstrap 约定（列类等）来实现，以便在移动屏幕上，对于传统的垂直布局，右窗格折叠在左窗格下方（或完全消失），两者都占据全屏宽度。然而，absolute在对更大的屏幕布局使用定位时似乎不可能做到这一点。
How can I attempt to tackle this problem?
我该如何尝试解决这个问题？
采纳答案by Zim
Update 2019
2019 年更新
Bootstrap 4
引导程序 4
Now that Bootstrap 4 uses flexbox, you can this layout using flex-grow and the new overflow utility classes. This minimizes the extra CSS that was needed before in BSv3...
现在 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://www.codeply.com/go/LIaOWljJm8
https://www.codeply.com/go/LIaOWljJm8
Bootstrap 3 (original answer)
Bootstrap 3（原始答案）
You can use a CSS media query to "disable" the absolute positioning on mobile screens. This will let Bootstrap's responsiveness kick in...
您可以使用 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%;
}
}
回答by David Braun
I forked Skelly's bootply herewhile using col-xs-12and hidden-xs.
我在使用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>
I prefer this because it avoids media queries in a css file.
我更喜欢这个，因为它避免了 css 文件中的媒体查询。
回答by Yunzhou
You don't need Bootstrap to do what you want. You can simply modify your existing CSS to following:
你不需要 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;
}
And then, in your media query for mobile screens, make both #left and #right flow:none, width: 100% and height: auto;
然后，在移动屏幕的媒体查询中，同时设置 #left 和 #right flow:none, width: 100% and height: auto;
If you really want to use Bootstrap, just put both #left and #right in the following structure:
如果你真的想使用 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>
