html - Bootstrap 与网格混合以等于 .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 到 .header-bottom-box 和等高的内部元素。

编辑我尝试使用 GIRD:

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

Answer 1

这很正常，先生，这一切都是因为上一栏而发生的。 text 小于 first 和 second。