在 Twitter Bootstrap 3.0 上更改小型设备中的溢出模式

Question

我有一个多行的两列布局，很像一个表格：我使用这种布局是因为我需要将数据与每一层的行对齐，而且效果很好。代码如下所示：

<div class="container">
    <div class="row sectionHeader">
        <div class="col-md-10 col-md-offset-1 text-center">
            <h2>Header</h2>
        </div>
    </div class="row">
    <div class="row">
        <div class="col-md-4 col-md-offset-1 text-center">
            <div class="lead diagramStep text-info">Stuff1</div>
        </div>
        <div class="col-md-4 col-md-offset-1 text-center">
            <div class="lead diagramStep text-info">Stuff2</div>
        </div>
    </div>
</div>

当然，您有多行两列，这在正常布局方面工作正常，因为它保证行对齐。

调整窗口大小时出现问题：单元格出现的顺序是（垂直）

row1 col1, row1 col2, row2 col1, row2 col2, row3 col1, row3 col2

等等，而我想要的是

row1 col1, row2 col1, row3 col1, row1 col2 row2 col2 row3 col2

所以所有第一列（所有行）后面都是第二列

如何在 Bootstrap 3.0 的小型设备上以“逐行对齐”的方式将数据显示在两列布局上，并且仍按列重叠？

Answer 1

尝试使用嵌套，例如：

<div class="container">
    <div class="row">
        <div class="col-md-6 leftside">
            <div class="row">
                <div class="col-xs-12">
                        1
                </div>  
                <div class="col-xs-12">
                        3
                </div>
                <div class="col-xs-12">
                        5
                </div>
            </div>
        </div>
                <div class="col-md-6 rightside">
            <div class="row">
                <div class="col-xs-12">
                        2
                </div>  
                <div class="col-xs-12">
                        4
                </div>
                <div class="col-xs-12">
                        6
                </div>
            </div>
        </div>      
    </div>
</div>  

update 使用 jQuery 来保证每行的 col 高度相等（在中 (md) 网格中）：

//act responsive, see: http://www.quirksmode.org/blog/archives/2010/08/combining_media.html     
if (document.documentElement.clientWidth >=992)
{

    for(var i = 1; i <= $('.col-md-6.rightside .row .col-xs-12').length; i++)
    {
        $('.col-md-6 .row .col-xs-12:nth-child('+ i +')').css('height',
        Math.max(
        $('.col-md-6.leftside .row .col-xs-12:nth-child('+ i +')').height(),
        $('.col-md-6.rightside .row .col-xs-12:nth-child('+ i +')').height()
        ));
    }
}   

另见：http://bootply.com/92264 请注意，我还向 col-md-6 列添加了一个附加类。另请注意document.documentElement.clientWidth 添加一些责任会很弱。查看Enquire.js 以获得更稳定的解决方案。