如何在Bootstrap中实现按钮、文本与图片的对齐效果？

问题原因 #

• 第三张车辆图片的响应式类名拼写错误：img.fluid应为img-fluid，导致图片没有自适应特性，出现尺寸错位
• 三个列容器没有设置等高布局，内部标题长度不一致，导致底部按钮没有对齐
• 图片容器没有统一高度规则，不同比例的图片渲染后高度不一致，出现顶部错位
• 原代码中存在多余的</script>闭合标签，可能引发渲染异常

修复步骤 #

1. 修正图片类名拼写错误，删除多余的script闭合标签
2. 给每个列容器添加d-flex flex-column类，开启垂直弹性布局
3. 给标题所在位置添加flex-grow-1类，自动填充剩余空间，将按钮挤压到列底部，保证所有按钮水平对齐
4. 给figure图片容器添加统一高度和居中样式，保证所有图片在同一高度区域内垂直、水平居中

修正后完整代码 #

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<meta charset="utf-8">
<title>prueba</title>
<style>
  .product-card figure {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
</style>
</head>
<body>
    <section id="explora nuestra gama"> <!-- EXPLORA NUESTRA GAMA -->
  <div class="container text-center py-5">
    <h2> EXPLORA NUESTRA GAMA</h2>
    <div class="row py-5 justify-content-center">
      <div class="col-12 col-md-4 d-flex flex-column mb-4 mb-md-0 product-card"> <!-- CARRO 1 -->
        <figure> <img class="figure-img img-fluid rounded" src="https://i.imgur.com/45aQm0Z.jpg" width="300" height="120" alt="suv"/> </figure>         
        <h3 class="flex-grow-1 mb-3">SUV</h3>
        <p> <a class="btn btn-dark" href="suv.html">Ver más</a></p> 
      </div>
      <div class="col-12 col-md-4 d-flex flex-column mb-4 mb-md-0 product-card"> <!-- CARRO 2 -->
        <figure> <img class="img-fluid" src="https://imgur.com/sqzKd7t.jpg" width="300" height="120" alt="pasajero"/> </figure>
        <h3 class="flex-grow-1 mb-3">VEHÍCULO DE PASAJEROS</h3>
        <p> <a class="btn btn-dark" href="#">Ver más</a></p>
      </div>
      <div class="col-12 col-md-4 d-flex flex-column product-card"><!-- CARRO 3 -->
        <figure> <img class="img-fluid" src="https://imgur.com/RDPnADx.jpg" width="300" height="120" alt="comercial"/> </figure>
        <h3 class="flex-grow-1 mb-3">COMERCIAL</h3>
        <p> <a class="btn btn-dark" href="comercial.html">Ver más</a></p>
          </div>  
    </div>
    <div class="col py-4"> <!-- boton y pagina de salida -->
      <p> <a class="btn btn-dark" href="simulador.html">SIMULA TU CUOTA MENSUAL AQUÍ</a></p>
    </div>
  </div>
</section>
</body>
</html>

调整效果说明 #

修改后所有图片会在统一高度的容器内居中展示，标题长短不会影响按钮位置，所有按钮会保持在同一水平线上，完全对齐。

内容的提问来源于stack exchange，提问作者douglas