私は、Bootstrap card-deck
およびcard
クラス( 料金の例 )。リストの1つが他よりも項目が少ない場合、ボタンの配置をどのように修正できるのか疑問に思いました。
すべてのボタンを(各カードの下部で)垂直方向に配置したいのですが、これを行う方法を理解できませんでした。 .align-bottom
クラスと同様に、ボタンを<div class="align-text-bottom">
。私は スペースの追加に関するこの質問 からいくつかの提案も試しましたが、まだ成功していません(間隔は、リストの残りのスペースを埋めるように可変にする必要があります)。
でのラッピング <div class="card-footer bg-white">
は、ボタンをカードの下部に配置せず、カードの周囲に境界線を作成するため、望ましい結果が得られませんでした。
誰かがアイデアを持っていますか?
編集:これが問題に似た jsfiddle です。
フッターを使用してください。すでにすべてが設定されています。
<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;
}