ブートストラップ カードの下部にボタンを配置するにはどうすればよいですか?

ブートストラップ カードの下部でのボタンの配置

ご覧のとおり、ブートストラップ カード内のボタンの配置は、ブートストラップ カード内のボタンの配置が問題になる可能性があります。内容の長さは異なります。各カードの下部にボタンを効果的に配置するには:

1. フレックスボックスの実装: d-flex クラスを .card-body 要素に追加して、フレックスボックス レイアウトを有効にします。
2. 列の配置を追加します: .card-body の flex-column クラスを使用して、カード内のコンテンツを垂直方向に配置します。
3. マージン自動を使用してボタンを配置します: mt-auto クラスを .card-body 内にネストされた .btn 要素に追加します。これにより、ボタンがカード本体の下部に自動的に配置され、残りのスペースが垂直に埋められます。

例については、次のコード スニペットを参照してください。

<div class="card">
  <div class="card-body d-flex flex-column">
    <p>Card Content</p>
    <button type="button" class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

実装することによりこれらの手順を実行すると、コンテンツのバリエーションに関係なく、ブートストラップ カード内のすべてのボタンがそれぞれの下部に一貫して配置されるようにすることができます。

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