Boostrap与网格混合到.col中行的高度相等

Question

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

我尝试使用flexbox实用程序，但没有找到解决方案，所以我想知道网格是否可以帮助我获得想要的内容，但是我不知道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到.header-bottom-box和内部元素的高度相等。

编辑 我尝试使用GIRD：

它的工作方式与我想要的一样，但是我不知道为什么会得到这个空白，如何删除它？

Answer 1

这是正常的先生， 这一切都是由于最后一次上校。文字少于第一和第二。

Answer 2

使用display：flex;也可以解决您的问题，每个.col-md-4

的高度都相同

.col-md-4{
    align-items: center;
    display: flex;
    justify-content: center;
}