如何使Bootstrap 4列高与行高相同>>

Question

我已经使用Bootstrap 4的行和列类在Angular 9中创建了此布局。图表由Chart.js库创建。

由于某种原因，我无法使每一行中的列都具有相同的高度，所以我来这里寻求帮助。

布局标记

 <div class="container mb-2">
    <div class="row" *ngFor="let row of rows">
      <div [ngClass]="{'col': component.cols == 4, 'col-9': component.cols == 3, 'col-6': component.cols == 2, 'col-3': component.cols == 1}" *ngFor="let component of row">
        <app-chart></app-chart>
      </div>
    </div>
 </div>
组件标记

<div class="container-fluid my-1 component-shadow rounded-lg">
  <div class="row border">
    <div class="col pt-1">
      <div class="h5 text-center">Some Chart</div>
    </div>
  </div>
  <div class="row border-left border-right border-bottom">
    <div class="col py-2">
      <canvas
      baseChart
        width="400"
        height="200"
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
        [chartType]="chartType"
      >
      </canvas>
    </div>
  </div>
</div>
列类由* ngClass

中的条件确定

我已经使用Bootstrap 4的行和列类在Angular 9中创建了此布局。图表由Chart.js库创建。由于某些原因，我无法使每一行中的列都相同...

Answer 1

没关系。我要做的就是将ChartOptions中图表的maintainAspectRatio设置为false。

Answer 2

请您在下面的CSS中进行检查，希望它对您有用。