如何让Bootstrap列（含间距）保持相同高度？

我正在使用Bootstrap框架，希望让三个列元素里的卡片（包含内部间距）保持相同高度，目前三个卡片高度不一致。

现有HTML代码 #

<div class="container">
  <div class="row mt-4">
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-laptop-code fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Web Development</h5>
        <p>I provide full Web Development according to your needs.</p>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-palette fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Web Design</h5>
        <p>I will do the best and most Modern Web App Designs for your website.</p>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-mobile-screen-button fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Responsive Design</h5>
        <p>Fully Responsive Design using Bootstrap or Media Queries.</p>
      </div>
    </div>
  </div>
</div>

现有CSS代码 #

.p-3{
  text-align: center;
  background: #202020;
  border-radius: 10px;
}

解决方案 #

Bootstrap的row默认是flex布局，其中的col元素本身已经是等高的，但内部的.p-3卡片没有占满父容器高度，导致视觉上高度不一致。可以通过以下两种简单方法解决：

方法1：给卡片添加h-100类 #

直接给每个.p-3的div添加Bootstrap内置的h-100类，让卡片占满父容器（col）的高度：

<div class="col-12 col-md-6 col-xl-4 service mt-4">
  <div class="p-3 h-100">
    <!-- 卡片内容 -->
  </div>
</div>

方法2：利用flex布局让卡片自动填充高度 #

给每个col添加d-flex flex-column类，再给卡片添加flex-grow-1类，这样卡片会自动填充列内的剩余空间，适合需要更灵活布局的场景：

<div class="col-12 col-md-6 col-xl-4 service mt-4 d-flex flex-column">
  <div class="p-3 flex-grow-1">
    <!-- 卡片内容 -->
  </div>
</div>

两种方法都能让三个卡片（包含内部间距）保持相同高度，无需额外自定义CSS。

内容的提问来源于stack exchange，提问作者Ahmed Sajid