css - Bootstrap 3:如何强制将列设置为相同的高度并使按钮底部对齐？

This question already has answers here:

How to make columns the same height, regardless of content, and vertically-align buttons within those columns?
                                
                                    （3个答案）
                                
                        
                                5年前关闭。
            
                    
我有两列包含文本和文本后的按钮。文本可能会很长，也可能会很短，因此列的高度会有所不同。我希望这些列具有相同的高度，并对齐底部的按钮。这是我的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

没有Java的话，有什么办法吗？

最佳答案

最简单的方法是添加overflow:auto;

的CSS

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

关于css - Bootstrap 3:如何强制将列设置为相同的高度并使按钮底部对齐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21844020/