Bootstrap栅格布局中col内的row无法占满父容器剩余高度

Bootstrap栅格的col容器默认是普通块级上下文，内部嵌套的row元素默认按自身内容高度渲染，不会自动填充父容器剩余高度；同时当前代码里的高度继承链断裂，即使给最内层卡片加了h-100，上层的row、col、Angular组件宿主元素都没有做高度适配，无法实现撑满剩余高度的效果。

• 给外层col-lg-8 pt-4容器追加Bootstrap内置flex工具类，将其改为纵向排列的flex容器，类名修改为col-lg-8 pt-4 d-flex flex-column
• 给需要占满剩余高度、包裹日度图表组件的row元素追加flex-grow-1类，标记该元素为可拉伸项，自动占满父col扣除第一个row内容高度后的所有剩余空间
• 补全全链路高度继承，避免高度塌陷：
  • 给该row内部的col-lg-12 pt-4列追加h-100类
  • 给app-chart-verba-diaria组件标签追加d-block h-100类——Angular组件默认宿主元素为行内元素，不设置块级+100%高度会打断高度传递
  • 内层卡片原本带的h-100类保留即可，不需要修改

<div class="col-lg-8 pt-4 d-flex flex-column">
  <!-- 上方两个并排图表的row保持原有逻辑，按内容高度渲染 -->
  <div class="row">
    <div class="col-lg-6">
      <app-chart-verba></app-chart-verba>
    </div>
    <div class="col-lg-6">
      <app-chart-termometro></app-chart-termometro>
    </div>
  </div>
  <!-- 下方通栏图表row自动拉伸占满剩余高度 -->
  <div class="row flex-grow-1">
    <div class="col-lg-12 pt-4 h-100">
      <app-chart-verba-diaria class="d-block h-100">
        <div class="bg-secondary text-center rounded p-4 h-100">
          <div class="d-flex align-items-center justify-content-between mb-4">
            <h6 class="mb-0">Worldwide Sales</h6>
          </div>
          <div class="w-100">
            <!-- canvas图表内容保留原有逻辑即可 -->
          </div>
        </div>
      </app-chart-verba-diaria>
    </div>
  </div>
</div>

注：如果图表渲染后出现尺寸异常，在Angular的ngAfterViewInit生命周期里手动调用一下chart实例的resize()方法即可，父容器高度变化后图表不会自动自适应是chart.js的常见问题。

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