Bootstrap：将元素与列底部对齐

Question

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

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

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

现在，我正在根据每个视口的大小设置不同的高度：

@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

不记得我是从哪里得到这个 sn-p 的，但这会使你的列的高度相同：

.row {
    display: table;
}

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

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

http://www.bootply.com/crLlXiiKqk