css bootstrap使行中的所有列高度相同[重复]答案

【问题标题】：css bootstrap make all cols in row same height [duplicate]css bootstrap使行中的所有列高度相同[重复]
【发布时间】：2020-07-14 02:17:24
【问题描述】：

我有两个相邻的盒子，Box1（左）有一点文字，Box2（右）有很多文字：

如何通过在框 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>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">

    <div class="col-6">
      <div class="card mb-4 box-shadow h-100">
        <div class="card-body">
          <p>box 1 data here  </p> 
        </div> 
      </div>
    </div> 

    <div class="col-6">
      <div class="card mb-4 box-shadow h-100">
        <div class="card-body">
          <p>box 1 data here  </p> 
          <p>box 2 data here  </p> 
          <p>box 2 data here  </p> 
        </div> 
      </div>
    </div>

  </div>

</div>

【讨论】：

谢谢！ style=height:100% 完美
您可以使用 h-100 引导类来获得 100% 的高度。您不需要为此添加内联 css。

【解决方案2】：

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">

    <div class="col-md-4" style="display:flex">
      <div class="card mb-4 box-shadow" style="width:100%">
        <!-- 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">
          <p>box 2 data here</p>
          <p>box 2 data here </p>
          <p>box 2 data here </p>
        </div>
      </div>
    </div>
    <!-- /col -->

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

【讨论】：