html - Bootstrap : align elements to bottom of column

Question

简而言之，这就是我要实现的目标:http://www.bootply.com/Muh7eahFC8#

响应式设计，包含三列，每列底部有一个按钮。

问题是我手动设置列的高度，我希望整个事情自动适应三列中最长的内容。

现在，我根据每个视口(viewport)的大小设置不同的高度:

@media only screen and (min-width : 992px) {
  div {
    height: 180px;
  }
  div a {
    position: absolute;
    bottom: -40px;
  }
}

@media only screen and (min-width : 1200px) {
  div {
    height: 140px;
  }
}

(换个屏幕宽度试试)

我认为我要实现的目标很常见。有没有更聪明的方法来实现它？

-- 编辑

在@DavidG 的帮助下，我找到了一个响应式解决方案:http://www.bootply.com/7C2WvyxNyZ 不幸的是，hte 33% 是硬编码的，如果我更改列数，我将不得不更新 css，而且我发现没有办法将每列中的按钮居中

Answer 1

不记得我从哪里得到这个片段，但这将使你的列具有相同的高度:

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

然后通过一些调整，您可以强制将 anchor 固定到 div 的底部。

http://www.bootply.com/crLlXiiKqk