css - 如何使css具有每行始终具有相同高度的反应列

问题描述

如何制作具有 6 列、3 列、1 列的反应式引导程序，但当浏览器大小发生变化时，列的高度始终相同？

角组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tiles',
  templateUrl: './tiles.component.html',
  styleUrls: ['./tiles.component.scss']
})
export class TilesComponent   implements OnInit {
  superTotalData1: any = [];
  superTotalData2: any = [];

  tilePlannedBenefit = 'Planned Benefit';
  tileMonthUpdated = '# Month Updated';
  tileNotOnTrack = '# Not on Track';
  tileBlownOut = '# Blown Out';
  tileSlipped = '# Slipped';
  tileReforecasted = '# Reforecasted';
  tilePlannedCost = 'Planned Cost';
  tileTotalAfe = 'Total AFE Amount';
  tileAfeSpend = 'AFE Spend %';
  tileAfeForecast = 'AFE Forecast %';
  tileCarryForward = 'Carry Forward';
  tileUnspent = 'Unspent';

  constructor() { }

  ngOnInit() {
    this.updateUI();
  }

  parseAmount(value = 0) {
    if (value >= 1000 && value < 1000000) {
      return `$${Math.ceil(value / 1000)}k`;
    } else if (value >= 1000000) {
      return `$${Math.ceil(value / 1000000)}M`;
    } else if (value >= 1000000000) {
      return `$${Math.ceil(value / 1000000)}B`;
    } else if (value >= 1000000000000) {
      return `$${Math.ceil(value / 1000000)}T`;
    }

    return `$${Math.ceil(value)}`;
  }

  myYAxisTickFormatting(val) {
    return '$' + val;
  }

  updateUI() {
    this.superTotalData1 = [
      new SuperTotalTile(this.parseAmount(564), this.tilePlannedBenefit),
      new SuperTotalTile(String('Mar 2020'), this.tileMonthUpdated),
      new SuperTotalTile(String(3), this.tileNotOnTrack),
      new SuperTotalTile(String(0), this.tileBlownOut),
      new SuperTotalTile(String(34), this.tileSlipped),
      new SuperTotalTile(String(4), this.tileReforecasted),
      new SuperTotalTile(this.parseAmount(345524), this.tilePlannedCost),
      new SuperTotalTile(this.parseAmount(45345), this.tileTotalAfe),
      new SuperTotalTile(`35%`, this.tileAfeSpend),
      new SuperTotalTile(`6%`, this.tileAfeForecast),
      new SuperTotalTile(this.parseAmount(4564), this.tileCarryForward),
      new SuperTotalTile(this.parseAmount(4565), this.tileUnspent),
    ];
  }

}

class SuperTotalTile {
  constructor(
    public value: string,
    public label: string
  ) { }
}

的HTML

<div class="container">
    <div class="row">
        <div class="col-md-2 col-sm-4 col-xs-12" *ngFor="let superItem of superTotalData1">
            <div class="super-tiles">
                <div class="super-tile height-max">
                    <div class="super-tile-value">
                        {{superItem.value}}
                    </div>
                    <br>
                    <div class="super-tile-label">
                        {{superItem.label}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.row [class*='col-'] {
  text-align: center;
  background-color: #cceeee;
  background-clip: content-box;
  margin-bottom: 5px;
}

.super-tiles{
  display: flex;

  .super-tile{
      margin: 0 5px;
      padding: 4px;
      flex-grow: 1;
      flex-basis: 0;
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      box-shadow: 0 1px 5px #d2d2d2;
      // align-items: center;
      // justify-content: center;
      color: #ffffff;
      background: #008cba;
  }

  .super-tile-label{
      font-size: 0.85em;
  }

  .super-tile-value{
      font-size: 1.5em;
      font-weight: bold;
      // padding-left: 8px;
      // text-align: right;
  }
}

.header-tiles{
  display: flex;

  .header-tile{
      margin: 0 5px;
      padding: 2px;
      flex-grow: 1;
      flex-basis: 0;
      display: flex;
      flex-direction: column;
      // border-radius: 4px;
      // box-shadow: 0 1px 5px #d2d2d2;
      // align-items: center;
      // justify-content: center;
      color: #000000;
      background: #ffffff;
  }

  .header-tile-label{
      font-size: 0.85em;
  }

  .header-tile-value{
      font-size: 1.5em;
      font-weight: bold;
      // padding-left: 8px;
      // text-align: right;
  }
}

我创建了一个显示问题的示例（请参阅/examples/tiles/*）。这是一个 Stackblitz：

https://stackblitz.com/edit/bootstrap-rqqm3h?file=app/examples/tiles/tiles.component.ts

如果浏览器宽度很宽，则列的行为符合预期。如果我减小浏览器宽度，则在某一点上，列没有像行中的其他列那样填充整个行高。例如：深蓝色瓷砖应该是该行的浅蓝色瓷砖的高度。

例如：当它正确显示时