ブートストラップのスタックされた行のギャップを解決する

ポートフォリオ ページのブートストラップ グリッドを構築するとき、スタックするときにタイルが長いとレイアウトにギャップが生じるという問題が発生する可能性があります。が発生します。この問題は、グリッド内の要素の高さが異なるために発生します。これを解決するには、いくつかの解決策があります:

1. すべてのポートフォリオ要素の高さを設定する: 各ポートフォリオ要素に固定の高さを確立すると、一貫した積み重ねが確保され、ギャップがなくなります。
2. 動的フィッティングにメーソンリーを使用する:メーソンリーは、利用可能なスペースに合わせて要素を動的に配置し、要素が配置されていても隙間をなくすレイアウト ツールです。
3. レスポンシブ クラスと Clearfix を採用する: ブートストラップ ドキュメントの「レスポンシブ列のリセット」で定義されているように、このアプローチには、レスポンシブ クラスと Clearfix を使用して、さまざまな場所でグリッドの配置の問題に対処することが含まれます。ブレークポイント.
4. jQuery を利用して列の高さを動的に調整する: jQuery を使用すると、列の高さを動的に調整し、コンテンツの長さに関係なく列が適切に配置されるようにすることができます。

問題を解決するための具体的なテクニックは次のとおりです:

追加各グリッド要素の後のclearfix div:

    

        ...
    
    

メディアクエリをclearfix divに適用してfloatをクリアします:

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        clear: both;
    }
}

このアプローチは以下を提供します:

• 読み取り可能で保守可能なマークアップ: HTML はシンプルなままであり、ポートフォリオ要素の管理が容易です。
• 異なる画面サイズ間での配置: CSS は、要素がすべての共通ブレークポイントで配置されることを保証し、ギャップ。