Bootstrap 4 列でカードの高さを同じにする方法は?

DDD
リリース: 2024-10-30 06:49:02
オリジナル
574 人が閲覧しました

How to Achieve Equal Heights for Cards in Bootstrap 4 Columns?

列内の Bootstrap 4 カードの高さを等しくする

前述したように、Bootstrap 4 フレームワークはすでに列にフレックスボックスを実装しています。最初は同じ高さです。これらの列内でカードの高さを等しくするには、カードで h-100 クラスの使用を検討してください。このクラスは高さを 100% に設定し、カードが各列内の利用可能なスペースを完全に占有できるようにします。

h-100 を使用してこれを実装する方法の例を次に示します。

<code class="html"><div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
    </div>
</div></code>
ログイン後にコピー

この変更により、内容に関係なく、各列内のカードの高さが確実に同じになります。以前はカードを含んでいた .card-deck クラスが不要になったことに注意することが重要です。

以上がBootstrap 4 列でカードの高さを同じにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!