ブートストラップ カード列でカードの高さを同じにする方法は?
Nov 25, 2024 am 11:30 AMブートストラップ カード列: カードの高さを均等にする
ブートストラップ 4 では、カード列クラスを使用して、複数のカードを配置する見た目の美しいレイアウトを作成できます。高さが可変の列。ただし、これによりカードの高さが不均一になる可能性があり、望ましくない場合があります。
カードの高さを均一にするために、Bootstrap は 2 つのソリューションを提供します。
オプション 1: 行の高さを設定するか、または列要素
行または行に align-items-stretch ユーティリティ クラスを設定することで、カードの高さを揃えることができます。カードが含まれる列要素。これにより、利用可能なスペースを埋めるためにカードが垂直方向に引き伸ばされます。
<div class="container"> <div class="row"> <div class="col-lg-4 d-flex align-items-stretch"> <!--CARD HERE--> </div> <div class="col-lg-4 d-flex align-items-stretch"> <!--CARD HERE--> </div> <div class="col-lg-4 d-flex align-items-stretch"> <!--CARD HERE--> </div> </div> </div>
オプション 2: Bootstrap 5 用の Flexbox ソリューション
Bootstrap 5 の場合、次の CSS コードを使用できます。 Flexbox を使用してカード列内のカードの高さを均等にするために使用されます。プロパティ:
.card-columns { display: flex; flex-wrap: wrap; align-content: stretch; }
CodePen の例
CodePen でのこのソリューションのライブ デモンストレーションについては、次のリンクにアクセスしてください:
https://codepen .io/Kerrys7777/pen/QWgwEeG
以上がブートストラップ カード列でカードの高さを同じにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する

node.jsとexpressのMulterを使用してファイルアップロードします
