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

Question

我正在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>

Answer 1

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