解决 Bootstrap 堆叠行中的间隙

为作品集页面构建 Bootstrap 网格时，您可能会遇到这样的问题：较长的图块在堆叠时会导致布局出现间隙发生。出现此问题的原因是网格内元素的高度不同。为了解决这个问题，存在多种解决方案：

1. 为所有投资组合元素设置高度：为每个投资组合元素建立固定高度，确保堆叠一致，消除间隙。
2. 使用 Masonry 进行动态拟合： Masonry 是一种布局工具，可以动态排列元素以适应可用空间，即使内容不同也能消除间隙lengths.
3. 采用响应式类和 Clearfix： 正如 Bootstrap 文档中“响应式列重置”下的定义，此方法涉及使用响应式类和 Clearfix 来解决不同断点处的网格对齐问题。
4. 利用 jQuery 动态调整列高： jQuery 可用于动态调整列的高度，确保它们正确对齐，无论内容长度如何。

这里有一个解决该问题的具体技术：

在每个内容后面添加一个clearfix div网格元素：

    

        ...
    
    

对clearfix div应用媒体查询以清除浮动：

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

此方法提供：

• 可读且可维护的标记： HTML 保持简单，允许轻松管理投资组合元素。
• 跨不同屏幕尺寸的对齐： CSS 确保元素在所有常见断点处对齐，从而消除差距。