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>

更新使用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以获得更稳定的解决方案。

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

1 个答案: