ブートストラップの柱の高さ

Question

私はブートストラップを学習し、それは私のために簡単デザインに魅力のページを構築するようになります願っています。

Iは、これら2つの例を理解するのに苦労している：

ブートストラップ3：http://codepen.io/rhutchinson/pen/WpxvWO

ブートストラップ4：http://codepen.io/rhutchinson/pen/aJZvKb

これらはブートストラップのバージョン以外同一であるため、私は仮定している、使用しました.rowの高さまでカラムの高さを伸ばすことは、ブートストラップ4の新機能です。

このバージョンの1つのバージョンの動作を複製する方法はありますか他のバージョンを使用中にssue？もしそうなら、それを行う最善の方法は何でしょうか？

私は自分自身のバックエンドスクリプトのロジックとして私にように自然に来ていないフロントエンド開発、より良い概念を与えるために、これらの次元の行動を理解したいと思います。

Answer 1

はいbootstrap 4のsame column height is native supportは、ブートストラップ4としてflex boxを使用します。

@ZimSystemsで述べたように、あなたが以下のexample--

img { 
 
    border-radius: 50%; 
 
} 
 

 
.bord { 
 
    border-style: solid; 
 
} 
 

 
.row-eq-height { 
 
    display: flex; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row row-eq-height"> 
 
     <div class="col-sm-3 text-center bord"> 
 
     <img src="http://placehold.it/140x140" class="center-block" /> 
 
     </div> 
 
     <div class="col-sm-6 text-center bord"> 
 
     <p>Some text</p> 
 
     </div> 
 
     <div class="col-sm-3 text-center bord"> 
 
     <img src="http://placehold.it/140x140" class="center-block" /> 
 
     </div> 
 
    </div> 
 
</div>

NOTE

を使用することにより、ブートストラップ3のためのフレックスを使用する場合は、簡単に同じ動作を実現することができますdisplay: flex;は完全な高さのために動作しますが、それはブートストラップ3行と列の応答動作を中断します。

Learn about flexbox here

Learn about the above example of .row-eq-height here

これはあなたの理解をクリアするのに役立ちます願っています！