对齐底部的两个按钮

Question

我正在使用 Bootstrap 4 的 card groups。我想将两个按钮对齐在同一行，该行应位于 .card 的底部。

jsfiddle.

我试过了

.card {
  position: relative;
}

.btn {
  position: relative;    // <- if I use absolute here, it will be ugly
  bottom: 0;
}

还有

.card {
  display: table;
}

.btn {
  display: table-cell;
  vertical-align: bottom;
}

但都不起作用。

Answer 1

这样的事情对你有用吗？

https://jsfiddle.net/44Lnjj8d/5/

.card {
  position: relative;
  padding-bottom: 40px;
}

.btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  -ms-transform:: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

Answer 2

您可以设置卡块高度，按钮将显示在块后。

https://jsfiddle.net/44Lnjj8d/6/

.card-block {
  height: 250px;
}