如何修復 Bootstrap 堆疊行中的間隙？
- Barbara Streisand原創
- 2024-11-06 06:17:021084瀏覽
Bootstrap 堆疊行中存在間隙？
創建從較大螢幕尺寸堆疊到較小螢幕尺寸的 Bootstrap 網格時，通常會遇到間隙內容較長的項目會破壞堆疊順序。以下是解決此問題的幾個解決方案：
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;
}
}以上是如何修復 Bootstrap 堆疊行中的間隙？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn