過剰に埋められたブートストラップ行のギャップを修正するにはどうすればよいですか?

過剰に埋められたブートストラップ行のギャップを減らす

問題分析:

ポートフォリオのブートストラップ グリッド システムを設計する場合、ユーザーはコンテンツの長さが変化すると、グリッド レイアウトにギャップが生じる場合があります。これは、グリッド内の項目の高さがスタッキング ブレークポイントを超える場合に発生します。

ソリューションの探索:

この課題に対処するには、次のソリューションを検討してください。

1. 固定高さ: すべてのポートフォリオ アイテムに均一の高さを割り当てます。
2. 組積造レイアウト: 要素を利用可能なサイズに合わせるための動的な調整手法を採用します。 space.
3. Clearfix を使用した応答クラス: メディア クエリとともにブートストラップの応答クラスを利用して、各行の指定された数の要素の後に float をクリアします。
4. jQuery高さの調整: jQuery を使用して列の高さを動的に調整し、最大高さに一致するようにします。

高度なアプローチ:

Mini Clearfix:

各項目の後に個別のクリア要素を使用する代わりに、各グリッド要素の後に追加の div を追加し、メディア クエリを使用してそれにミニ クリアフィックスを適用することを検討してください。このアプローチにより、余分な JavaScript が回避され、マークアップの読みやすさが維持されます。

<div class="row portfolio">
    <div class="...">...</div>
    <div class="clear"></div>
</div>

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

jQuery 高さ調整:

より動的なアプローチについては、jQuery を使用して列を調整することを検討してください。最大高さに一致する高さ:

var row=$('.portfolio');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

以上が過剰に埋められたブートストラップ行のギャップを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。