对齐底部的两个按钮 [英] Align two buttons at the bottom

问题描述

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

I am using Bootstrap 4's card groups. I want to align both buttons at the same line which should be at bottom of the .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;
}

但都行不通.

推荐答案

这样对您有用吗?

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%);
}

这篇关于对齐底部的两个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！