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

列内の 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 サイトの他の関連記事を参照してください。