Align two buttons at the bottom

问题:

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.

The jsfiddle.

I tried

.card {
  position: relative;
}

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

and also

.card {
  display: table;
}

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

But neither works.

回答1:

would something like this work for you ?

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

回答2:

You can set the card-block height and the buttons will show after the block.

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

.card-block {
  height: 250px;
}