0

テーブルのように、複数の行を持つ 2 列のレイアウトがあります。各レベルでデータを行に揃える必要があるため、このレイアウトを使用します。これは非常にうまく機能します。コードは次のようになります。

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

もちろん、2 つの列を持つ複数の行があり、これは行が整列されることが保証されるため、通常のレイアウトに関しては問題なく機能します。

ウィンドウのサイズが変更されたときに問題が発生します。セルが表示される順序は（垂直方向）です

row1 col1、row1 col2、row2 col1、row2 col2、row3 col1、row3 col2

など、私が持ちたいのは

row1 col1、row2 col1、row3 col1、row1 col2 row2 col2 row3 col2

したがって、すべての最初の列 (すべての行) の後にすべての 2 番目の列が続きます

Bootstrap 3.0 の小型デバイスで、「行ごとに整列」された 2 列のレイアウトでデータを表示し、列ごとにデータを重ねるにはどうすればよいですか?

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 を使用して更新し、列の高さがすべての行 (中 (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 に答える