Bootstrap与网格混合到内部行的高度相等.col

Question

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

我试图使用flexbox实用程序，但我没有找到解决方案，所以我想知道网格是否会帮助我得到我想要的东西，但我不知道是否显示：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

这是正常的先生，这一切都发生在最后一个col。文字少于第一和第二。

Answer 2

使用display：flex;也可以解决你的问题，你将在每个.col-md-4中获得相同的高度

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