CSS Clearfixを使用してブートストラップ行の不均一な高さのDivを垂直方向に揃える方法

CSS Clearfixes を使用したブートストラップでの不均一な高さの Div の垂直方向の配置

目的は、Bootstrap の行内で高さの異なる div を垂直方向に配置することです。 Masonry などの外部プラグインを使用します。 CSS ソリューションは次のとおりです。

提供された HTML 構造では、各カテゴリはクラス「menu-category」の div によって表されます。これらの div は、各カテゴリ内の項目が異なるため、高さが異なります。望ましいスタッキングを実現するには、Bootstrap の可視性クラスを利用できます。

具体的には、可視性修飾子を備えた「clearfix」クラスを追加して、div レイアウト内のフロートを選択的にクリアできます。たとえば、中および大の画面サイズでのみフロートをクリアしたい場合は、次のコードを使用できます:

<div class="clearfix visible-md visible-lg"></div>

同様に、小さい画面サイズでのみフロートをクリアするには、次のコードを使用します:

<div class="clearfix visible-sm"></div>

これらのクリア div を HTML 構造内の適切な場所に追加すると、フローティング div が次の行に折り返され、強制的にスタックされるのを防ぐことができます。

例:

  

    ...
  
  

    ...
    <div class="clearfix visible-sm"></div>
  
  

    ...
  
  

    ...
    <div class="clearfix visible-md visible-lg"></div>
  
  

    ...
  

このアプローチでは、div の高さがコンテンツに基づいて動的に調整され、行コンテナー内にきちんとスタックされるようになります。

以上がCSS Clearfixを使用してブートストラップ行の不均一な高さのDivを垂直方向に揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。