有没有办法在引导程序中平等地调整 <div class ="card"> ？

Question

我正在苦苦思索如何让这张卡彼此平等：

如下图所示。导致停机的首要原因卡与其他卡上的卡不匹配，反之亦然。我希望它们彼此处于相同的高度，无论它们的内部是什么。

下面是我的代码：

<div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="card shadow mb-4">
                        <h5 class="card-header">
                            Top Reason for downtime
                        </h5>
                        <div class="card-body">
                            <ul id="top5Downtime">

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="card shadow mb-4">
                        <h5 class="card-header">
                            Top Down Terminals:
                        </h5>
                        <div class="card-body">
                            <ol id="mostDown">

                            </ol>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card shadow mb-4">
                        <h5 class="card-header">
                            Top Up Terminals:
                        </h5>
                        <div class="card-body">
                            <ol id="mostUp">

                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!--End of div.row-->

            <div class="row">
                <div class="col-12">
                    <div class="card shadow mb-5">
                        <div class="card-body">
                            <div id="bar-chart">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End of div.row-->
            <div class="row">
                <div class="col-12">
                    <div class="card shadow mb-5">
                        <div class="card-body">
                            <div id="lineChart">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card shadow mb-3">
                        <h5 class="card-header">
                            Planned vs Unplanned Event
                        </h5>
                        <div class="card-body">
                            <div id="pieChart"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card shadow mb-3">
                        <h5 class="card-header">
                            Downtime vs Uptime
                        </h5>
                        <div class="card-body">
                            <div id="pieChart2"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card shadow mb-5">
                        <div class="card-body">
                            <div id="barChart2">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card shadow mb-5">
                        <div class="card-body">
                            <div id="barChart3">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--END OF div.row-->
            <!--END OF div.row-->
        </div>

我尝试过使用align-self-stretch，但它只会破坏我的设计。我该如何继续？

Answer 1

对同一行中的每个.cols 应用display: flex（或.d-flex 类）将使它们具有相同的高度：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 d-flex">
      <div class="card shadow mb-4 w-100">
        <h5 class="card-header">
          Top Reason for downtime
        </h5>
        <div class="card-body">
          <ul id="top5Downtime">

          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-5 d-flex">
      <div class="card shadow mb-4 w-100">
        <h5 class="card-header">
          Top Down Terminals:
        </h5>
        <div class="card-body">
          <ol id="mostDown">

          </ol>
        </div>
      </div>
    </div>
    <div class="col-md-4 d-flex">
      <div class="card shadow mb-4 w-100">
        <h5 class="card-header">
          Top Up Terminals:
        </h5>
        <div class="card-body">
          <ol id="mostUp">

          </ol>
        </div>
      </div>
    </div>
  </div>
  <!--End of div.row-->

  <div class="row">
    <div class="col-12">
      <div class="card shadow mb-5">
        <div class="card-body">
          <div id="bar-chart">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--End of div.row-->
  <div class="row">
    <div class="col-12">
      <div class="card shadow mb-5">
        <div class="card-body">
          <div id="lineChart">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 d-flex">
      <div class="card shadow mb-3 w-100">
        <h5 class="card-header">
          Planned vs Unplanned Event
        </h5>
        <div class="card-body">
          <div id="pieChart"></div>
        </div>
      </div>
    </div>

    <div class="col-md-6 d-flex">
      <div class="card shadow mb-3 w-100">
        <h5 class="card-header">
          Downtime vs Uptime
        </h5>
        <div class="card-body">
          <div id="pieChart2"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <div class="card shadow mb-5">
        <div class="card-body">
          <div id="barChart2">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <div class="card shadow mb-5">
        <div class="card-body">
          <div id="barChart3">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--END OF div.row-->
  <!--END OF div.row-->
</div>

您还必须将.w-100 应用于.d-flex cols 内的卡片，以使它们在较小的响应间隔上拉伸到整个列宽。

重要提示：此解决方案依赖于您在每个.col 中只有一张卡这一事实。如果您有多个，您还需要将.flex-column 添加到您的.col。
但是，对于您的示例，.d-flex 到 .cols 就足够了。