如何使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
  ) { }
}

我创建了一个示例来说明这个问题（请参见/examples/tiles/*）。下面是一场闪电战：

如果浏览器宽度较宽，则列的行为符合预期。如果减小浏览器宽度，则会出现一个点，即列不会像行中的其他列那样填充整行高度。例如：深蓝色瓷砖应为该行浅蓝色瓷砖的高度

例如：正确显示时

但如果我稍微减小宽度（在它变为仅3列之前）：

最后，当它减少到3列时，它的外观如何：

解释正确行为的示例文章：

及

如示例所示：

• 除非浏览器宽度非常宽，否则列中每行的蓝色平铺高度不相同
• 列之间有过多的空白，我不知道如何最小化

---

在所有浏览器宽度的示例中，我一直在苦苦思索是什么值使深蓝色与浅蓝色具有相同的高度。非常感谢您的帮助。

您的问题必须是完整的。这意味着所有的信息都需要在这个问题本身之内。链接是不够的。如果您的代码未按预期工作，请创建一个并发布在此处。@Scrattle现在是否正确，或者我是否需要重复整个问题？我不确定。您已经发布了这些示例，但是用户仍然需要离开站点才能看到CSS。如果我尝试去bootstrap-rqqm3h.stackblitz.io，我会得到，我不想再点击了。我想我理解你的问题，但是我不能了解你正在使用的CSS，除非我点击链接。如果出于任何原因，链接消失了，那么没有人能够知道它是什么。（请注意，我对CSS、angular和ng bootstrap都不是一个期望，我只是查看了你的帖子）@Scrattle这是一个我没有想到的好观点。我将在上面添加代码。您的问题必须是独立的。这意味着所有的信息都需要在这个问题本身之内。链接是不够的。如果您的代码未按预期工作，请创建一个并发布在此处。@Scrattle现在是否正确，或者我是否需要重复整个问题？我不确定。您已经发布了这些示例，但是用户仍然需要离开站点才能看到CSS。如果我尝试去bootstrap-rqqm3h.stackblitz.io，我会得到，我不想再点击了。我想我理解你的问题，但是我不能了解你正在使用的CSS，除非我点击链接。如果出于任何原因，链接消失了，那么没有人能够知道它是什么。（请注意，我对CSS、angular和ng bootstrap都不是一个期望，我只是查看了你的帖子）@Scrattle这是一个我没有想到的好观点。我将在上面添加代码。

<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>

.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;
  }
}