[解決済み] Bootstrap - ボタンをカードの下に配置する

質問

Bootstrap のサンプルで card-deck と card クラス( 価格設定例 ). 私は、リストの1つが他のものより少ないアイテムを持っている場合、ボタンの整列を修正することができる方法を疑問に思いました。

すべてのボタンを縦に（各カードの下に）並べたいのですが、その方法が分かりませんでした。私は .align-bottom クラスを設定し、さらにボタンを <div class="align-text-bottom"> . また、いくつかの提案を試してみました。 スペースを追加することに関するこの質問 しかし、まだ成功しません（また、スペーシングは、リストから残りのスペースを埋めるように可変でなければなりません）。

でラップする <div class="card-footer bg-white"> でラップしても、カードの下部にボタンの位置が揃わず、周囲に何らかのボーダーができるため、望ましい結果にはなりませんでした。

どなたかアイデアをお持ちですか？

編集してください。 ここでは jsfiddle で、この問題に似ています。

どのように解決するのですか？

以下のBootstrap 4のモディファイアクラスを使用することができます。

1. 追加 d-flex に .card-body
2. 追加 flex-column に .card-body
3. 追加 mt-auto に .btn に入れ子になっている .card-body

フィドル

参照先 このページ のページで、Bootstrap 4 のフレックスボックス修正クラスの全リストをご覧ください。