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;
}