带网格的引导框与 .col 内的行高相等

Question

我想将我的代码设置为自动计算 .col 内部的相等高度，因为例如在 .col 内部我有 <h2> 和 <p> 可能有不同的行数，所以这个元素的高度会每个 .col 都不同，我希望 .col 中的所有行都具有相同的高度。

我尝试使用 flexbox 实用程序，但我没有找到解决方案，所以我想知道 grid 是否会帮助我得到我想要的，但我不知道 display: grid 是否继承了 flexbox 元素的高度?

这是我的代码：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="header-bottom-box">
        <h2>Projektowanie <b>stron</b></h2>
        <div class="img-container">
          <img src="http://irson.linuxpl.eu/images/projektowanie-stron.jpg" class="img-fluid" alt="Projektowanie stron">
        </div>
        <p>Projektowanie oraz tworzenie serwisów internetowych.</p>
        <div class="text-right">
          <a href="/oferta.html">więcej</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="header-bottom-box">
        <h2>Pozycjonowanie <b>stron</b></h2>
        <div class="img-container">
          <img src="http://irson.linuxpl.eu/images/pozycjonowanie-stron.jpg" class="img-fluid" alt="Pozycjonowanie stron">
        </div>
        <p>Zwiększ pozycję swojej strony www w wynikach wyszukiwania.</p>
        <div class="text-right">
          <a href="/oferta.html">więcej</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="header-bottom-box">
        <h2>Outsourcing <b>IT</b></h2>
        <div class="img-container">
          <img src="http://irson.linuxpl.eu/images/outsourcing-it.jpg" class="img-fluid" alt="Outsourcing IT">
        </div>
        <p>Outsourcing informatyczny Profesjonalna opieka informatyczna dla firm.</p>
        <div class="text-right">
          <a href="/oferta.html">więcej</a>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/jRweow

我考虑过使用 display: grid to .header-bottom-box 和内部元素的相等高度。

编辑 我尝试使用 GIRD：

它就像我想要的那样工作，但我不知道为什么我会得到这个空白，如何删除它？

Answer 1

这是正常的先生， 这一切都是因为最后一个col。 text 小于 first 和 second。