如何修復 Bootstrap 堆疊行中的間隙？

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;
    }
}