如何使用Bootstrap创建无间隙连续栅格布局？

嘿，我完全懂你遇到的困扰——默认的Bootstrap行(row)和列(col)布局是基于flex的，每一行里的列都会被强制拉平高度，导致下一行的元素只能对齐到上一行最高元素的底部，自然就出现了讨厌的垂直间隙。要实现你想要的那种元素紧密排列、没有空白的连续栅格，其实有两种非常实用的方案：

方案1：用Bootstrap 5 + Masonry（官方推荐） #

Bootstrap 5官方已经支持和Masonry插件配合实现瀑布流布局，步骤很简单：

1. 引入Masonry的JavaScript脚本（可使用本地文件或公共CDN资源）
2. 给你的栅格容器添加data-masonry属性，配置布局参数
3. 直接把所有列元素放在容器里，不需要嵌套row！

示例代码：

<!-- 栅格容器 -->
<div class="container" data-masonry='{"percentPosition": true }'>
  <!-- 第一列 -->
  <div class="col-sm-4 mb-3">
    <div class="card h-100">
      <div class="card-body">
        <p class="card-text">这是一个高度较长的卡片内容，用来测试布局效果，多写几句填充高度...</p>
      </div>
    </div>
  </div>
  <!-- 第二列 -->
  <div class="col-sm-4 mb-3">
    <div class="card h-100">
      <div class="card-body">
        <p class="card-text">短内容</p>
      </div>
    </div>
  </div>
  <!-- 第三列 -->
  <div class="col-sm-4 mb-3">
    <div class="card h-100">
      <div class="card-body">
        <p class="card-text">中等长度的内容，看看会不会自动填充上方的空白，这里多写两行...</p>
      </div>
    </div>
  </div>
  <!-- 更多列元素... -->
</div>

Masonry会自动计算每个元素的位置，把它们塞进垂直方向的可用空间，完美实现你要的连续栅格效果。

方案2：纯CSS Grid实现（无需JS） #

如果不想引入外部插件，用CSS Grid也能达成同样的效果，而且兼容性很好（现代浏览器都支持）：
首先写自定义CSS：

/* 自定义瀑布流栅格 */
.masonry-grid {
  display: grid;
  /* 适配sm断点，3列布局 */
  grid-template-columns: repeat(auto-fit, minmax(33.333%, 1fr));
  grid-gap: 1rem; /* 列之间的间距，和Bootstrap的gutter保持一致 */
}

/* 小屏幕下切换为单列 */
@media (max-width: 575.98px) {
  .masonry-grid {
    grid-template-columns: 1fr;
  }
}

然后HTML结构：

<div class="container masonry-grid">
  <div class="card">
    <div class="card-body">
      <p class="card-text">高度较长的卡片内容，多写几句来填充高度，测试布局是否连续...</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <p class="card-text">短内容</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <p class="card-text">中等长度内容，看看能不能自动填充上方空白区域...</p>
    </div>
  </div>
  <!-- 更多卡片... -->
</div>

这种方法利用CSS Grid的流式布局特性，元素会自动填充垂直方向的空白，完全不需要依赖JS，简洁又高效。

为什么默认的row/col不行？ #

再补充一句：Bootstrap的row是flex布局，默认align-items: stretch，会把同一行里的所有列高度拉平，下一行的row只能从上一行的底部开始排列，这就是间隙产生的原因。而上面两种方案都是打破了“行”的限制，让元素根据整体空间自由排列，所以能实现连续的栅格效果。

内容的提问来源于stack exchange，提问作者Saurav Kumar