在底部對齊兩個按鈕

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