如何在响应式网格中创建两个可独立滚动的列? [英] How to create two independently-scrollable columns in a responsive grid?
问题描述
我需要呈现一个主从屏幕,其中主和详细信息在响应式网格中分别是可独立滚动的并排列.当浏览器宽度减少到某个阈值以下时,两列会堆叠在一起,只有一个整页滚动.
理想情况下,我希望这在 twitter-bootstrap 中完成.看起来应该很简单吧?
我想你想在 Bootstrap 中使用类似这样的东西,并将 .scrollable div 设置为具有overflow:auto".
Bootstrap 将在较低分辨率下自动生成然后堆叠.
<div class="span6"><div class="scrollable"></div><div class="span6"><div class="scrollable"></div>
I have a need to present a master-detail screen where the master and detail are each independently-scrollable, side-by-side columns in a responsive grid. When the browser width is reduced below some threshold, the two columns become stacked, with only a single full-page scroll.
Ideally, I'd like this to be done within twitter-bootstrap. It seems this should be simple?
I'd imagine you want something like this in Bootstrap with the .scrollable divs set to have "overflow:auto" on them.
Bootstrap will make then stack automagically at lower resolutions.
<div class="row-fluid">
<div class="span6">
<div class="scrollable"></div>
</div>
<div class="span6">
<div class="scrollable"></div>
</div>
</div>
这篇关于如何在响应式网格中创建两个可独立滚动的列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!