如何让Bootstrap中部分列的高度大于其他列？

看起来你是想实现左边两个小区块堆叠、右边一个区块占满左侧总高度的布局对吧？你现在的问题出在把所有列都放在了同一个.row里——Bootstrap的栅格系统会让同一行的列在水平方向排列，高度只会匹配当前行的最高列，没法让单个列跨多行占满高度。

我们可以调整布局结构，把左右两侧分成两个独立的列容器，左边放堆叠的两个区块，右边放单个高度自适应的区块，这样右边的列就会自动和左侧的总高度对齐：

<div class='container-fluid'>
  <div class="row">
    <!-- 左侧堆叠区块容器 -->
    <div class="col-md-3">
      <div style='border:1px solid black;'>STATUS</div>
      <div style='border:1px solid black; margin-top: 1px;'>
        SOME TEXT ASDASDASDJLASDJKLASDJAD ASDASDLASKD aASDASDK:ASDKASDK ASDASJDASDASDKASJDASDJ
      </div>
    </div>
    <!-- 右侧占满高度的区块 -->
    <div class="col-md-9" style='border:1px solid black;'>L</div>
  </div>
</div>

关键调整说明： #

• 将原来分散的四个col-md-*合并成两个父列：左侧.col-md-3包含两个堆叠的子div，右侧.col-md-9是单个区块
• 右侧的列会自动继承父行的高度，也就是和左侧两个子区块的总高度保持一致
• 如果需要右侧区块有最小高度限制，可以给它添加min-height: 50vh;样式，或者用Bootstrap内置的h-100类（Bootstrap 4+适用）来占满父容器高度

你的当前效果：

目标效果（调整后即可实现）：

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