html - 如何使一些引导列比其他的更高？

因此，基本上来说，在做网络接口并尝试正确分配所有内容时，我仍然是初学者。我决定使用引导程序库。我试图将模态对话框分成多个部分，但我真的很努力地要使某些部分相互堆叠，而让另一个部分占据整个空间。

我目前拥有的是：
https://i.gyazo.com/adeeb3cca0abb6dea4a5d002d3568afa.png

我想要达到的目标：
https://i.gyazo.com/e8513c243424cb71926ac838e8b1166e.png

这是我目前带有一些示例文本的代码，以尝试分隔每个部分：

<div class='container-fluid'>
  <div class="row">
   <div class="col-md-3" style='border:1px solid black;max-height:5vh;'>
      STATUS
   </div>
   <div class="col-md-9" style='border:1px solid black;min-height:50vh;'>
     L
   </div>
   <div class="col-md-3">
      SOME TEXT ASDASDASDJLASDJKLASDJAD
      ASDASDLASKD
      aASDASDK:ASDKASDK
      ASDASJDASDASDKASJDASDJ
   </div>
   <div class="col-md-9">
     L
   </div>
 </div>
</div>

最佳答案

为了匹配您提供的图像，您需要两列-一三列宽四行，一九列宽一行。

左列中行的高度将由其内容确定。我在左列的一行中写了一个示例，其中包含额外的内容：

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="row">
        3
      </div>
      <div class="row">
        3<br>
        wide<br>
        but<br>
        taller
      </div>
      <div class="row">
        3
      </div>
      <div class="row">
        3
      </div>
    </div>
    <div class="col-sm-9">
      9
    </div>
  </div>
</div>

JSFiddle实例。