Bootstrap不同高度方块布局：如何设置对应div高度？

先帮你理清楚需求：你想用Bootstrap栅格实现这样的布局——第一行左侧是占6列的红色块，右侧是3列的蓝色块；第二行左侧是偏移3列的3列蓝色块，右侧是6列的红色块，而且右侧这个红块应该是要和第一行的红块顶部对齐（毕竟你加了upped类）。要搞定这个布局，核心要处理同行列高度一致和第二个红块的向上对齐问题，下面给你几个实用方案：

方案1：用Bootstrap自带的Flex工具类（最贴合Bootstrap思路） #

Bootstrap本身提供了flex相关的工具类，能快速让行内列高度统一，同时调整第二个红块的位置：

第一步：让每行的列自动等高 #

给每个row加上d-flex align-items-stretch类，这样同一行里的所有列都会自动拉伸到相同高度：

<div class="container-fluid">
  <div class="row d-flex align-items-stretch">
    <div class="color_red col-md-6">Heyyy</div>
    <div class="color_blue col-md-3">hi</div>
  </div>
  <div class="row d-flex align-items-stretch">
    <div class="offset-md-3 color_blue col-md-3">hi</div>
    <div class="upped color_red col-md-6">Heyyy</div>
  </div>
</div>

第二步：让第二个红块和第一行红块顶部对齐 #

如果你的需求是让第二个行的红块和第一行红块顶对齐（视觉上红块是跨两行的大区块），可以给.upped类加负margin：

.upped {
  margin-top: -100%; /* 数值可以换成具体高度，比如-200px，取决于第一行红块的实际高度 */
}

如果怕百分比不稳定，也可以用绝对定位，记得给第二个row加相对定位：

.row:nth-child(2) {
  position: relative;
}
.upped {
  position: absolute;
  top: 0;
  right: 0;
}

这样第二个红块会脱离文档流，精准和第一行红块顶对齐。

方案2：设置固定高度（适合内容高度固定的场景） #

如果每个色块的内容高度是固定的，直接给红色和蓝色块设置固定高度就行，简单粗暴：

.color_red, .color_blue {
  min-height: 200px; /* 用min-height比height更灵活，内容超了也不会直接溢出 */
  overflow-y: auto; /* 可选，内容太多时显示滚动条 */
}

这个方案适合内容不会随意变化的场景，不用折腾布局逻辑。

方案3：用CSS Grid替代Bootstrap栅格（复杂布局更灵活） #

如果你的布局需求更精细，也可以直接用CSS Grid来实现，摆脱Bootstrap栅格的限制：

<div class="grid-container">
  <div class="red-block big">Heyyy</div>
  <div class="blue-block small">hi</div>
  <div class="blue-block small offset">hi</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 模拟Bootstrap的12列 */
  gap: 0; /* 可以根据需求调整列间距 */
}
.red-block.big {
  grid-column: 1 / 7; /* 占第1到第7列，对应col-md-6 */
  grid-row: 1 / 3; /* 跨两行 */
  background-color: red;
}
.blue-block.small {
  grid-column: 7 / 10; /* 占第7到第10列，对应col-md-3 */
  grid-row: 1 / 2;
  background-color: blue;
}
.blue-block.small.offset {
  grid-column: 4 / 7; /* 偏移3列后占3列 */
  grid-row: 2 / 3;
  background-color: blue;
}

这种方式能直接定义每个区块的位置和跨度，高度会自动匹配行高，布局逻辑更直观。

总结一下：如果想继续用Bootstrap，方案1是最推荐的；内容固定选方案2最省事；布局复杂的话方案3的CSS Grid更强大。

内容的提问来源于stack exchange，提问作者Čedomir Babić