ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。