Bootstrap - ボタンをカードの下部に揃える 質問する

Bootstrap - ボタンをカードの下部に揃える 質問する

card-deck私は、クラスとクラスを使用しているBootstrapの例の1つを覗いていましたcard価格例)。リストの 1 つに他のリストよりも少ない項目がある場合に、ボタンの配置を修正するにはどうすればよいのか疑問に思いました。

アライメントの問題

すべてのボタンを縦に並べたいのですが(各カードの下部)、その方法がわかりません。.align-bottomクラスとボタンをラップする<div class="align-text-bottom">。また、いくつかの提案も試しました。スペースを追加することに関するこの質問しかし、まだ成功しません (また、リストの残りのスペースを埋めるように間隔を可変にする必要があります)。

ラッピング<div class="card-footer bg-white">ボタンがカードの下部に揃わず、ボタンの周囲に何らかの境界線が作成されるため、望ましい結果は得られませんでした。

誰かアイデアを持っていますか?

編集:がここにありますjsfiddleそれは問題に似ています。

ベストアンサー1

次の Bootstrap 4 修飾子クラスを使用できます。

  1. d-flexに追加.card-body
  2. flex-columnに追加.card-body
  3. ネストmt-autoに追加する.btn.card-body

フィドル

参照するこのページBootstrap 4 の flexbox 変更クラスの完全なリスト。

おすすめ記事