如何在响应式网格中创建两个可独立滚动的列? [英] 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屋！