在底部对齐两个按钮

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