使用Bootstrap构建垂直行布局遇问题：调整高度导致列错位

仅用Bootstrap的内置工具类就能实现你要的布局，不需要额外写自定义CSS，核心是用好Bootstrap的网格系统+flex布局工具类，就能解决高度调整时的错位问题。

对应布局的实现示例 #

如果是「左侧单列占满高度，右侧两列垂直堆叠且自适应高度」的布局，可以这么写：

<!-- 外层容器占满视口高度 -->
<div class="container-fluid min-vh-100">
  <div class="row h-100">
    <!-- 左侧高列 -->
    <div class="col-md-6 bg-primary p-3">
      左侧内容区域
    </div>
    <!-- 右侧嵌套垂直列 -->
    <div class="col-md-6">
      <div class="row flex-column h-100">
        <div class="col bg-secondary p-3">
          右侧上方区域
        </div>
        <div class="col bg-success p-3">
          右侧下方区域
        </div>
      </div>
    </div>
  </div>
</div>

解决错位的关键要点 #

• 给外层容器/行添加h-100或min-vh-100，让布局有明确的高度参照，避免子元素高度失控
• 右侧嵌套row flex-column，强制内部列垂直排列，col类会自动均分父容器的高度
• 不需要手动设置固定高度，所有元素的高度都会随窗口自适应，调整窗口时不会出现挤错位的情况

如果是更复杂的非对称高度布局，可能需要加几行自定义CSS，但绝大多数垂直行布局需求，用Bootstrap内置类都能搞定。

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