能否实现Bootstrap垂直网格布局？需求及现有方案问题咨询

你需要的布局可以通过Bootstrap的网格系统+弹性布局类实现，不需要硬写固定宽高。原代码的问题在于用了两个独立的row，导致左右区块垂直错位，且硬设置宽度违背了Bootstrap的响应式设计逻辑。

正确实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .vh-60 { height: 60vh; }
    .vh-40 { height: 40vh; }
  </style>
</head>
<body class="m-0">
  <div class="container-fluid h-100">
    <div class="row h-100">
      <!-- 左侧列：上下两个等高区块 -->
      <div class="col d-flex flex-column">
        <div id="infoBox" class="border vh-50">box1（50vh）</div>
        <div id="playBox" class="border vh-50">box2（50vh）</div>
      </div>
      <!-- 右侧列：上下两个不同高度区块 -->
      <div class="col d-flex flex-column">
        <div id="tracklistBox" class="border vh-60">box3（60vh）</div>
        <div id="episodesBox" class="border vh-40">box4（40vh）</div>
      </div>
    </div>
  </div>
</body>
</html>

关键说明 #

1. 外层高度控制：给container-fluid和row添加h-100类，确保布局占满整个视口高度
2. 列内弹性布局：左右两列都用d-flex flex-column，让内部区块垂直排列
3. 高度类复用：利用Bootstrap自带的vh-50类实现50视口高度，自定义vh-60和vh-40类满足右侧区块需求
4. 响应式列比例：默认col会均分宽度，你可以改成col-8和col-4这类指定比例的类，调整左右列的宽度占比

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