使用Bootstrap Grid无法实现文本紧密包裹的Masonry布局问题

我来帮你搞定这个问题——你遇到的核心矛盾其实是Bootstrap的flex布局特性和Masonry紧凑排列需求之间的冲突，下面给你两种纯CSS/Bootstrap兼容的解决方案，第一种能完美实现你要的效果：

方案一：用CSS Grid替代Bootstrap Col实现真正的Masonry（推荐） #

Bootstrap的容器可以和CSS Grid无缝结合，不需要依赖它的.col-*类，这样能完全控制元素的排列逻辑，完美实现紧凑的瀑布流：

修改后的HTML #

<head>
 <title>Dragula with auto width grid</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
 <div class="container-fluid">
   <!-- 替换原来的row为自定义的grid容器 -->
   <div class="masonry-grid">
     <div class="statement">
       <p>This is statement 1.</p>
       <p>This is statement 1.</p>
       <p>This is statement 1.</p>
       <p>This is statement 1.</p>
     </div>
     <div class="statement">
       <p>This is statement 2.</p>
       <p>This is statement 2.</p>
     </div>
     <div class="statement">
       <p>This is statement 3.</p>
     </div>
     <div class="statement">
       <p>This is statement 4.</p>
       <p>This is statement 4.</p>
     </div>
     <div class="statement">
       <p>This is statement 5.</p>
       <p>This is statement 5.</p>
       <p>This is statement 5.</p>
     </div>
     <div class="statement">
       <p>This is statement 6.</p>
     </div>
     <div class="statement">
       <p>This is statement 7.</p>
       <p>This is statement 7.</p>
     </div>
   </div>
 </div>
</body>
</html>

对应的CSS（适配Bootstrap容器+响应式） #

/* 给容器加内边距，替代Bootstrap的gutter */
.container-fluid {
  padding: 1rem;
}

.masonry-grid {
  display: grid;
  /* 4列等宽，和原来col-3的比例完全一致 */
  grid-template-columns: repeat(4, 1fr);
  /* 列和行之间的间距，控制元素间的空隙 */
  grid-gap: 1rem;
}

.statement {
  border: solid;
  color: black;
  padding: 1em 2.4em .6em 1em;
  border-radius: .4em;
  /* 强制元素按自身高度渲染，不被网格拉伸 */
  align-self: start;
}

/* 响应式断点和Bootstrap保持一致 */
@media (max-width: 992px) {
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .masonry-grid {
    grid-template-columns: 1fr;
  }
}

拖拽适配 #

因为用了CSS Grid，dragula拖拽后元素会自动填补空隙，只需要把初始化目标指向我们的grid容器：

dragula(document.querySelectorAll('.masonry-grid'));

方案二：基于Bootstrap Flex的折中方案（保留col类） #

如果一定要保留Bootstrap的.col-*类，我们可以修改.row的flex属性，让元素不强制拉伸，但要注意：这种方式只能做到“同一行元素高度不同”，没法实现真正的Masonry（下方元素不会跨行填补上方空隙），适合对布局要求不高的场景：

修改后的CSS #

.row {
  /* 取消默认的拉伸规则，让元素按自身高度显示 */
  align-items: flex-start;
  /* 让行之间的间距正常生效 */
  align-content: flex-start;
  /* 取消Bootstrap默认的负margin，用gap控制元素间距 */
  margin: 0;
  gap: 1rem;
}

.col-3 {
  /* 取消col默认的内边距，把padding放到statement里 */
  padding: 0;
}

.statement {
  border: solid;
  color: black;
  padding: 1em 2.4em .6em 1em;
  border-radius: .4em;
  width: 100%;
}

关键原因说明 #

为什么Bootstrap Grid会破坏你的布局？因为Bootstrap的.row默认是display: flex; align-items: stretch;，这个stretch属性会强制同一行里所有的.col-*元素高度拉平到该行最高的那个，完全违背了Masonry布局的核心逻辑。而CSS Grid是二维网格布局，天然支持元素按自身高度占位，并且能轻松实现响应式，是实现这种布局的最佳选择。

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