コンテンツの長さが異なるブートストラップ カードの下部にボタンを配置するにはどうすればよいですか?

Bootstrap を使用してカードの下部にボタンを配置する

Bootstrap カード デッキを使用するときに遭遇する一般的な課題の 1 つは、一部のカードにボタンが配置されている場合にボタンを垂直方向に配置することです。項目が少なくなります。この問題は、カード間のリストの長さの違いによって発生します。

これに対処するには、次の Bootstrap 4 修飾子クラスを使用できます:

1. d-flex to .card-body: これにより、カードのフレックスボックス コンテナが確立されます。 body.
2. flex-column を .card-body に設定します。フレックスボックス コンテナーを垂直方向に設定します。
3. mt-auto を .btn に設定します。 .card-body にネストされている: ボタンをカード本体の下部に配置するための自動スペースを追加します。コンテナ。

HTML 例:

<div class="card">
  <div class="card-body d-flex flex-column">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
    </ul>
    <button class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

フィドルのデモ:

については、次のフィドルを参照してください。ライブデモンストレーション: https://jsfiddle.net/IGN7K/

これらのクラスを実装すると、コンテンツの長さに関係なく、ボタンがすべてのカードの下部に一貫して配置されるようになります。

以上がコンテンツの長さが異なるブートストラップ カードの下部にボタンを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。