web-dev-qa-db-ja.com

Bootstrap-ボタンをカードの下部に配置します

私は、Bootstrap card-deckおよびcardクラス（ 料金の例 ）。リストの1つが他よりも項目が少ない場合、ボタンの配置をどのように修正できるのか疑問に思いました。

Alignment issue

すべてのボタンを（各カードの下部で）垂直方向に配置したいのですが、これを行う方法を理解できませんでした。 .align-bottom クラスと同様に、ボタンを<div class="align-text-bottom">。私は スペースの追加に関するこの質問 からいくつかの提案も試しましたが、まだ成功していません（間隔は、リストの残りのスペースを埋めるように可変にする必要があります）。

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

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

編集：これが問題に似た jsfiddle です。

htmlcsstwitter-bootstrapbootstrap-4
56
a_guest

フッターを使用してください。すでにすべてが設定されています。

    <div class="card-deck">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Title goes here</h4>
                        <p class="card-text">Ut leo enim, fermentum fermentum tempor sit amet, vehicula in felis. Pellentesque a arcu augue. Nam eu malesuada lorem. Curabitur et molestie lacus.</p>
                    </div>
                    <div class="card-footer text-muted mx-auto">
                        <button type="button" class="btn btn-sm btn-outline-secondary">Click me!</button>
                    </div>
                </div>

次に、オプションでカードフッター要素をスタイルできます。

.card-footer {
  background: transparent;
  border-top: 0px;
}

デモ： https://jsfiddle.net/rustynox/203zwyq6/

0
RustyNox