如何跨 Bootstrap 5 列对齐文本？

如何解决如何跨 Bootstrap 5 列对齐文本？

我设置了引导程序列，其中包含照片和下方的简要说明。因为照片的高度不同，所以文本没有跨列对齐，看起来很糟糕。我确定这是一个简单的修复，但我似乎无法找到它！提前致谢

<div class="row colabs">
      <div class="col-lg-6 col-12">
          <h2>Megan Reitz</h2>
          <img class="collab-pics" src="C:\Users\donal\OneDrive\Desktop\John Higgins Website\Images\megan-reitz.jpg" alt="">
          <p class="collab-texts">Long standing research partner into 'speaking truth to power' and 'workplace activism'</p>
          <a class="collab-links" href="http://www.meganreitz.com/">http://www.meganreitz.com/</a>
      </div>
      <div class="col-lg-6 col-12">
          <h2>Mark Cole</h2>
          <img class="collab-pics" src="C:\Users\donal\OneDrive\Desktop\John Higgins Website\Images\Mark-Cole.jpg" alt="">
          <p class="collab-texts">Fellow explorer into the intellectual headwaters of current organizational and management practice</p>
          <a class="collab-links" href="https://radicalod.org/">https://radicalod.org/</a>
      </div>
    </div>

enter image description here

解决方法

在这里，您可以选择以下任何一种解决方案

1. 尝试使用 bootstrap-5 内置类，如“img-fluid”..等 参考链接：- https://getbootstrap.com/docs/5.0/content/images/
2. 您可以将图像设置为一个 div 作为背景，并使用 background-position、background-size .. 等属性
3. 您可以为所有图像元素设置应用通用高度/宽度，这样您就可以控制图像和之后的文本..