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/

10-12 00:17
查看更多