基于Bootstrap 4的响应式盒子网格：统一盒子尺寸诉求

刚好之前也遇到过类似的情况，不用硬编码宽高就能搞定，给你几个实用的方案，都是基于Bootstrap本身的特性或者轻量的自定义CSS：

方案1：用Bootstrap内置的高度适配类（最简单！） #

如果你的项目用的是Bootstrap 4或更高版本，直接给每个盒子加上h-100类就行，搭配网格的row和col使用：

<div class="row g-4">
  <!-- 第一个盒子 -->
  <div class="col-md-4">
    <div class="box h-100 p-4 border rounded">
      这里是内容较少的文本框
    </div>
  </div>
  <!-- 第二个盒子（内容多） -->
  <div class="col-md-4">
    <div class="box h-100 p-4 border rounded">
      这里是内容比较多的文本框，用来测试高度对齐效果。这里是内容比较多的文本框，用来测试高度对齐效果。这里是内容比较多的文本框，用来测试高度对齐效果。
    </div>
  </div>
  <!-- 剩下4个盒子同理 -->
</div>

原理很简单：h-100会让盒子占满它所在列（col）的高度，而Bootstrap的row默认会让所有列的高度保持一致，所以所有盒子都会自动拉伸到和内容最多的那个一样高，完全不用手动设高度。

方案2：用Bootstrap 5的Grid布局强化对齐 #

如果是Bootstrap 5，还可以结合原生Grid的特性来实现，适合需要更精细控制的场景：

<div class="row row-cols-1 row-cols-md-3 g-3">
  <div class="col d-flex">
    <div class="box flex-grow-1 p-4 border rounded">
      短内容文本框
    </div>
  </div>
  <div class="col d-flex">
    <div class="box flex-grow-1 p-4 border rounded">
      长内容文本框，用来测试高度对齐。长内容文本框，用来测试高度对齐。长内容文本框，用来测试高度对齐。
    </div>
  </div>
  <!-- 其他盒子 -->
</div>

再配合一点点自定义CSS让Grid行高度统一：

.row.row-cols-md-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
}

这种方式下，Grid会自动让每一行的单元格高度匹配最高的那个，再通过d-flex和flex-grow-1让盒子填满单元格空间，响应式也能完美适配。

方案3：自定义Flex容器（不依赖Bootstrap类也能行） #

如果你的项目里Bootstrap版本比较旧，或者想完全自己控制，写个简单的Flex容器样式就行：

.box-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

.box-grid .box {
  flex: 1 1 calc(33.333% - 0.666rem); /* 每行3个，自动计算间距 */
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
}

.box-grid .box .text-content {
  flex: 1; /* 让内容区域填充剩余空间，确保底部元素对齐 */
}

对应的HTML结构：

<div class="box-grid">
  <div class="box">
    <div class="text-content">短内容文本框</div>
    <button class="btn btn-sm btn-primary mt-2">按钮</button>
  </div>
  <div class="box">
    <div class="text-content">长内容文本框，用来测试高度对齐。长内容文本框，用来测试高度对齐。长内容文本框，用来测试高度对齐。</div>
    <button class="btn btn-sm btn-primary mt-2">按钮</button>
  </div>
  <!-- 其他4个盒子 -->
</div>

这个方法的好处是完全自定义，不管用不用Bootstrap都能生效，而且flex:1会让内容区域自动填充，盒子高度自然和最高的保持一致。

以上三个方案都不需要硬编码宽高，完全根据内容自适应，你可以根据自己的Bootstrap版本和需求选一个就行～

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