ブートストラップのサムネイルの行にボタンを揃える方法は？

Question

私はブートストラップサムネイルの行を揃えるために、このjQueryのコードを使用しています：

<script> 
function equalHeight(group) {  
    var tallest = 0;  
    group.each(function() {  
     var thisHeight = $(this).height();  
     if(thisHeight > tallest) {   
      tallest = thisHeight;  
     }  
    });  
    group.each(function() { $(this).height(tallest); }); 
} 

$(document).ready(function() { 
    equalHeight($(".thumbnail")); 
}); 
</script> 

はスクリーンショット：

質問：

どのようにしても、4つのボタンを揃えることができますか？

Answer 1

これはflexを使用して行うことができます。 div内のボタンを除くすべてのコンテンツをラップします。その後、親のdivにflex-direction:column;justify-content:space-between;を適用します。

ここには例があります。.colを固定幅に設定しています.jqueryを使用して同等のことを行っているからです。

.col{ 
 
    width:150px; 
 
    padding:0 10px; 
 
    margin:5px; 
 
    border:1px solid black; 
 
    float:left; 
 
    display:flex; 
 
    flex-direction:column; 
 
    height:230px; 
 
    justify-content:space-between; 
 
}

<div class="col"> 
 
    <div> 
 
    <h3>Family</h3> 
 
    <p>This is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a text 
 
    This is a textThis is a textThis is a text</p> 
 
    </div> 
 
    <button>Click Me</button> 
 
</div> 
 
<div class="col"> 
 
    <div> 
 
    <h3>Women</h3> 
 
    <p>This is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a text</p> 
 
    </div> 
 
    <button>Click Me</button> 
 
</div>