0

I have a two columns layout with multiple rows, much like a table: I use this layout because I need to align the data into the rows at each level, and it works pretty well. The code looks like the following:

<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>

Of course, you have multiple rows with two columns, and this works fine in terms of normal layout, since it guarantees that rows are aligned.

The problem comes when the window is resized: the order in which the cell appears are (vertically)

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

and so on, while what I would like to have is

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

So all the first column (all rows) followed by all the second column

How can data be displayed on two columns layout with a "aligned row by row" and still overlap by column on small devices on Bootstrap 3.0?

4

1 回答 1

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

于 2013-11-04T21:04:38.903 回答