ホームページ >ウェブフロントエンド >CSSチュートリアル >ブートストラップのスタックされた行のギャップを修正するにはどうすればよいですか?
ブートストラップのスタックされた行のギャップを修正するにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-11-06 06:17:021081ブラウズ
ブートストラップのスタックされた行にギャップがありますか?
大きい画面サイズから小さい画面サイズまでスタックするブートストラップ グリッドを作成する場合、ギャップが発生するのが一般的です。長いコンテンツを含むアイテムは積み重ね順序を乱します。この問題に対処するためのいくつかの解決策を次に示します。
1.要素の高さの設定:
ポートフォリオ グリッド内のすべての要素に固定の高さを割り当てます。
2. Masonry を使用する:
利用可能なスペースに収まるように要素のサイズを動的に調整する masonry.js のようなライブラリを使用します。
3.レスポンシブ クラスと Clearfix:
Bootstrap のドキュメントの「レスポンシブ列のリセット」で説明されているように、レスポンシブ クラスを使用し、グリッド内の各要素の後に「clearfix」クラスの div を追加してギャップを防ぎます。
4. jQuery の高さの調整:
jQuery を使用して、グリッド内の最大高さに基づいて列の高さを動的に調整します。
レスポンシブ クラスと Clearfix アプローチを使用した例:
グリッド内の各要素に「clear」クラスを追加します:
`<div>
<div>
CSS を追加さまざまなブレークポイントを処理します:
@media (max-width: 767px) {
.portfolio>.clear:nth-child(6n)::before {
content: '';
display: table;
clear: both;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.portfolio>.clear:nth-child(8n)::before {
content: '';
display: table;
clear: both;
}
}
@media (min-width: 1200px) {
.portfolio>.clear:nth-child(12n)::before {
content: '';
display: table;
clear: both;
}
}以上がブートストラップのスタックされた行のギャップを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。