ハードコーディングせずにカード列のブートストラップ カードの高さを同じにする方法は?

ブートストラップ カードのカード列の高さを同じにする方法

ブートストラップ 4 を使用する場合、すべてのカードを作成する必要がある場合があります。カード列レイアウトでは同じ高さを共有します。これにより、一貫性があり、視覚的に美しい外観が確保されます。

問題の説明

Bootstrap ドキュメントの voorbeeld を使用して、再試行せずにすべてのカードを強制的に同じ高さにするにはどうすればよいですか?ハードコーディングされる解決策?

回答

Align-Items プロパティの追加

カードの高さを揃えるには、align-Items プロパティを利用できます。カードを含む行要素または列要素の items プロパティ。このプロパティは、フレックス項目をコンテナ内でどのように垂直に配置するかを指定します。

オプション 1: 行で使用

カード列要素を行要素内にラップし、 align-items-stretch クラスをそれに追加します。これにより、カードが垂直方向に整列され、最も高いカードに合わせてカードの高さが引き伸ばされます。

<div class="container">
    <div class="row align-items-stretch">
        <div class="col-lg-4">
            <div class="card">...</div>
        </div>
        <div class="col-lg-4">
            <div class="card">...</div>
        </div>
        <div class="col-lg-4">
            <div class="card">...</div>
        </div>
    </div>
</div>

オプション 2: 列で使用

または、次のように追加することもできます。 align-items-stretch クラスを各col要素に直接追加します。これにより、各列内でカードが垂直方向に整列され、実質的に同じ高さになります。

<div class="container">
    <div class="row">
        <div class="col-lg-4 align-items-stretch">
            <div class="card">...</div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">...</div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">...</div>
        </div>
    </div>
</div>

Bootstrap 5 の更新

Bootstrap 5 では、align-items-個々のカードの制御を改善するために、ストレッチ クラスが align-self-stretch クラスに置き換えられました。 Alignment.

<div class="row">
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
</div>

注: 行要素で align-items を使用するとカードの境界線が非表示になりますが、列要素で使用するとカードの境界線が非表示になります。設計要件に最も適した方法を選択してください。

以上がハードコーディングせずにカード列のブートストラップ カードの高さを同じにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。