リストの長さが異なるブートストラップ カードの下部にあるボタンを垂直方向に整列するにはどうすればよいですか?

さまざまなリストの長さを持つブートストラップ カードのボタンの垂直方向の配置

ブートストラップ プロジェクトでは、シリーズが存在する状況に遭遇することがあります。リストの長さが異なるカードのリスト。これらのカードのすべてのボタンを垂直方向に下部に揃えたい場合は、デフォルトのスタイルでは問題が発生する可能性があります。

この配置を実現するには、次の Bootstrap 4 モディファイア クラスの採用を検討してください。

• d-flex へ.card-body
• flex-column から .card-body
• mt-auto へ .card-body

これらのクラスは、フレックスボックス レイアウトを使用するように .card-body を構成し、ボタン (.btn) をクリックすると、垂直方向の残りのスペースが自動的に占有されます。

実際的なデモについては、この更新された jsfiddle を参照してください:

[jsfiddle link]

追加の考慮事項:

mr-auto や ml-auto などのクラスを使用して .btn 要素の余白を変更することで間隔を設定します。
• 特定の画面をターゲットにする場合は、レスポンシブ フレックス ユーティリティ (d-block、d-md-none など) の使用を検討してください。

これらのテクニックを実装すると、ブートストラップ カードのボタンが確実に垂直方向に整列され、さまざまなコンテンツの長さに対応します。

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