web-dev-qa-db-ja.com

Bootstrap 3>同じ高さの列を作成しようとしています

私はまだ学習を始めたばかりなので、私と一緒に頑張ってください。できるだけ多くの情報を提供しようと思います。

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です。

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

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
25
Ryan Michael

CSSの負のマージンを使用してみてください（jQueryは不要です）。

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

#equalheight {
    overflow: hidden; 
}

http://bootply.com/922

EDIT-別のオプション

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

22
Zim

ブートストラップチームは、必要なCSSクラス.row-eq-heightを開発しました。詳細については here をご覧ください。このように現在の行にこのクラスを追加するだけです：

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

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

4
Kevin R.

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

1
Kerem Demirer