25

学習を始めたばかりなので、引き続きお付き合いください。できる限り多くの情報を提供します。

Bootstrap 3 を使用して、いくつかのコンテンツ領域を同じ高さになるように調整しようとしています。行ごとに 4 つあり、列の数は指定されていません (これを判断するために、php 配列をループしています)。基本的に、表示する必要があるコンテンツ領域の数に関係なく、それらはすべて同じ高さを使用するか、少なくともその行の他の 3 つと同じ高さを使用する必要があります。

私はこのjqueryライブラリを使用しています> https://github.com/mattbanks/jQuery.equalHeights >これはうまく機能しますが、ページのサイズを変更するたびにコンテンツ領域の高さが更新されません(画面を新しいサイズとヒットを更新し、高さを正しい位置に再調整します)

> Twitter Bootstrap - 流体列で同じ高さなどの他のいくつかのソリューションも調べましたが、複数の行に合わせて調整するとうまくいかないようです。

JavaScript ソリューションを使用する必要があるかどうか、または CSS でできることがあれば、どんな助けもいただければ幸いです。高さを一定にし、画面のサイズ変更時に再調整する必要があることに注意してください。私は Bootstrap 3 を使用することを好みますが、2 のソリューションが利用可能な場合は、そのバージョンを使用します。

<div class = "container">
<div class="row">
    <div id="equalheight">      

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>              

    </div>
</div>

上記は私のhtmlです。2番目のコンテンツ領域には大量のコピーがあります

<script>
    $('#equalheight div').equalHeights();
</script>

<script>
    $(window).resize(function(){
       $('#equalheight div').equalHeights(); 
    });
    $(window).resize();
</script>

上記は私のJavascriptで、前述のライブラリを呼び出しています。

ヘルプ/アドバイスをありがとう

4

3 に答える 3

22

CSS の負のマージンを使用してみることができます (jQuery は必要ありません)。

.demo{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#efefef;
}

#equalheight {
    overflow: hidden; 
}

http://bootply.com/92230

編集 - 別のオプション

flexboxCSS3仕様を使用した別の例を次に示します: http://www.bootply.com/126437

于 2013-11-06T18:50:02.853 に答える
5

Bootstrap チームは、.row-eq-heightまさにあなたが必要としている CSS クラスを開発しました。詳しくはこちらをご覧ください。次のように、現在の行にこのクラスを追加するだけです。

 <div class="row row-eq-height">
    your columns
 </div>

警告:div.row.row-eq-height 12 列ごとに新しい列を追加する必要があります

于 2015-04-29T11:00:08.327 に答える
1

このプラグインを使用できます。それはかなりうまくいきます。

于 2014-11-25T01:24:00.080 に答える