Bootstrap 3：如何強制列的高度相同並將按鈕對齊底部

Question

我有兩列包含文本和文本之後的按鈕。文字可能相當長或相當短，所以列將有不同的高度。我希望列的高度相同，並將底部的按鈕對齊。這裏是什麼我的HTML看起來像一個示例：

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

    <div class="col-sm-6 outer"> 
    <div class="row"> 
     <div class="col-sm-6 inner"> 
     <img src="http://lorempixel.com/400/400" class="img-responsive"> 
     </div> 
     <div class="col-sm-6"> 
     <h4>Content content content content content</h4> 
     <button class="btn btn-default">Text</button> 
     </div> 
    </div> 
    </div> 

    <div class="col-sm-6 outer"> 
    <div class="row"> 
     <div class="col-sm-6 inner"> 
     <img src="http://lorempixel.com/400/400" class="img-responsive"> 
     </div> 
     <div class="col-sm-6"> 
     <h4>Content content content content content content content content content</h4> 
     <button class="btn btn-default">Text</button> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

直播代碼：

http://www.bootply.com/114596

有沒有這樣做沒有JavaScript的方法嗎？

Answer 1

做到這一點的最簡單的方法是添加overflow:auto;

CSS

h4{ 
    height:200px; 
    overflow:auto; 
}