css bootstrap使行中的所有列具有相同的高度

Question

我有两个相邻的框，Box1（左）有一些文本，Box2（右）有很多文本：

https://i.stack.imgur.com/9JmGv.png

如何通过在框 1 上填充更多空白来使框 1 延伸到与框 2 相同的高度？我正在努力使两个盒子的高度相同；我的代码如下所示：

<div class="container-fluid">

  <div class="row">

    

    <div class="col-md-4">

      <div class="card mb-4 box-shadow">

        <!-- BOX1 -->

        <div class="card-body">

          box 1 data here   

        </div> 

       </div>

      </div> <!-- /col -->

    

    <div class="col-md-8">

      <div class="card mb-4 box-shadow">

        <!-- BOX2 -->

        <div class="card-body">

          box 2 data here   

          box 2 data here 

          box 2 data here 

        </div> 

       </div>

      </div> <!-- /col -->

    

  </div> <!-- /row -->

</div>

Answer 1

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><div class="container-fluid">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-6">&nbsp; &nbsp; &nbsp; <div class="card mb-4 box-shadow h-100">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>box 1 data here&nbsp; </p>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp;&nbsp; &nbsp; <div class="col-6">&nbsp; &nbsp; &nbsp; <div class="card mb-4 box-shadow h-100">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>box 1 data here&nbsp; </p>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>box 2 data here&nbsp; </p>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>box 2 data here&nbsp; </p>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><div class="container-fluid">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-md-4" style="display:flex">&nbsp; &nbsp; &nbsp; <div class="card mb-4 box-shadow" style="width:100%">&nbsp; &nbsp; &nbsp; &nbsp; <!-- BOX1 -->&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box 1 data here&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <!-- /col -->&nbsp; &nbsp; <div class="col-md-8">&nbsp; &nbsp; &nbsp; <div class="card mb-4 box-shadow">&nbsp; &nbsp; &nbsp; &nbsp; <!-- BOX2 -->&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>box 2 data here</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>box 2 data here </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>box 2 data here </p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <!-- /col -->&nbsp; </div>&nbsp; <!-- /row --></div>