在 Bootstrap 网格中对齐大小不等的图像答案

【问题标题】：Aligning unequal sized images in a Bootstrap grid在 Bootstrap 网格中对齐大小不等的图像
【发布时间】：2019-12-22 01:57:17
【问题描述】：

我在 3 x 4 列的 Bootstrap 网格中使用了 3 张尺寸不等的图片：

这弄乱了我的布局。我想要实现的是：

通过 CSS 实现此结果的正确方法是什么？

 <div class="row text-center">

        <div class="col-md-4 mb-3 mb-md-0">
          <div class="image-1">
           <img src="assets/img/image_1.svg" class="mb-3">                      
            <h4>Lorem Ipsum</h4>
            <p>
              Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
            </p>
          </div> 
          </div>
        </div>
        <div class="col-md-4 mb-md-0">
          <div class="image-2">
            <img src="assets/img/image_2.svg" class="mb-3">
            <h4>Dolor Sit Amet</h4>
            <p>
                Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
            </p>
          </div>
        </div>
        <div class="col-md-4 mb-md-0">
          <div class="image-3">
              <img src="assets/img/image_3.svg" class="mb-3">
            <h4>consetetur sadipscing</h4>
            <p>
                Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
            </p>
          </div>
        </div>
      </div>

【问题讨论】：

标签： html css bootstrap-4 alignment

【解决方案1】：

您可以在具有最小高度的盒子上添加一个顶部填充，同时通过使用 box-sizing 属性并将其设置为边框盒来保留盒子大小。这样内部内容会缩小到底部而不影响外层

【讨论】：