如何使 Bootstrap 5 列都处于相似的高度？答案

【问题标题】：How to make Bootstrap5 Columns all a similar height?如何使 Bootstrap 5 列都处于相似的高度？
【发布时间】：2022-06-13 18:56:18
【问题描述】：

我正在使用 Bootstrap5。但是，我只想使这两列的高度相似。我怎样才能做到这一点？这是代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
    <div style="background-color:LightGray" class="container-1 col-xs-6" >
        Cake
        <img src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg" alt="Cake"/>
<div style="background-color:Gray" class="container-2 col-xs-6">
        Content
    </div>
    </div>
</div>
</div>

【问题讨论】：

有帮助吗：stackoverflow.com/questions/19695784

标签： html css height

【解决方案1】：

也许这会有所帮助

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <h2>Cake</h2>
    <div class="col-6">
      <img class="img-fluid" src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg"
        alt="Cake" />
    </div>
    <div class="col-6" style="background-color:Gray">
      Content
    </div>
  </div>
</div>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <div class="container">
          <div class="row">
            <h2>Cake</h2>
            <div class="col-6">
              <img class="img-fluid" src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg"
                alt="Cake" />
            </div>
            <div class="col-6" style="background-color:Gray">
              Content
            </div>
          </div>
        </div>

col-xs-6 在 bootstrap5 中不起作用，因此您可以使用 col-6 而不是 col-xs-6 和 div 关闭并且使用不正确

【讨论】：