Question

我正在努力使表单更灵敏地处理较小的浏览器。目前，我们正在使用bootstrap来帮助布局，但我并不反对其他替代解决方案。在这个特定的视图中，我们有两列，每列都有不同的数据量。诀窍是右上角的组需要保持在页面顶部，无论我们是在一列还是两列中呈现它。右上部分下方的组应该从左侧列的任何组下方流动。以下是我们想要实现的目标的说明：

2 - 柱：

 L1   R1
 L2   R2
 L3

1栏：

R1
L1
L2
L3
R2

使用Bootstrap，我可以使用col-pull / col-push让R1保持在顶部，但是在左侧列的所有值都已渲染后，R1下的右侧列值会生成，从而导致：

这是我到目前为止尝试过的标记。我还为那些需要在http://jsfiddle.net/jimwooley/g8r35/播放实时样本的人发布了一个jsfiddle。

<div class="row row-fluid">
    <div class="col-sm-7 col-sm-push-5 col-xs-12">R1</div>
    <div class="col-sm-5 col-sm-pull-7 col-xs-12">L1<br />
         L2<br />
         L3</div>
    <div class="col-sm-5 col-sm-push-5 col-xs-12">R2<br />
         R3</div>
</div>

注意：各个部分的高度不同，所以我不能只在第二行左下方或第二行旁边流动，因为它们可能会落在两者之间的中间位置。另外，我不能在这里使用列，因为结果需要与IE8一起使用。

Answer 1

将它们设为第6列而不是12列？由于bootstrap在页面上查找12个？因此，6或3的调用应显示单列。（本例中为平板电脑或手机）。全屏显示2列。

我可能会误解这个问题。

Answer 2

虽然我承认重复不是一件好事，但我已成功使用Bootstrap中的hidden- *和visible- *类。

<div class="row row-fluid">
    <div class="col-sm-7 col-sm-push-5 col-xs-12">
        <div>
            Upper Right<br />
            line 1<br />
        </div>
        <div class="hidden-xs" >Below Right<br />
            line 1<br />
        </div>
    </div>
    <div class="col-sm-5 col-sm-pull-7 col-xs-12">Upper Left<br />
        line 1<br />
        line 1<br />
        line 1<br />
        line 1<br />
        line 1<br />
    </div>
    <div class="visible-xs">
        Below Right<br />
        line 1<br />
    </div>
</div>

见这里：http://jsfiddle.net/darronj/t8nYn/

Answer 3

为什么不让R1只是右推并允许列环绕它？这样它总是排在最前面。它需要是第一个。

Bootstrap中的列流

3 个答案: