Bootstrap 5 列内图片底部对齐问题解决方案咨询

这个坑我之前踩过！你用的align-bottom类其实是针对行内/行内块元素的垂直对齐，而Bootstrap 5的.row是flex容器，.col作为flex子项，这套规则就不适用了。下面给你两种最简洁的Bootstrap原生解决方案，不用写自定义CSS：

方法1：给列添加flex工具类 #

把右侧的.col-md改成flex容器，然后用align-items-end让内部元素对齐到底部：

<div class="col-md border d-flex align-items-end">
  <img src="https://london.ac.uk/sites/default/files/styles/max_1300x1300/public/2018-10/london-aerial-cityscape-river-thames_1.jpg?itok=6LenFxuz" class="img-fluid" alt="">
</div>

原理：d-flex把列变成flex容器，align-items-end会让容器内的所有子元素（这里就是图片）沿交叉轴（垂直方向）的末端对齐。

方法2：给图片添加mt-auto类（更轻量） #

如果不想修改列的布局，直接给图片加mt-auto，利用flex布局的margin自动分配特性，把图片推到底部：

<div class="col-md border">
  <img src="https://london.ac.uk/sites/default/files/styles/max_1300x1300/public/2018-10/london-aerial-cityscape-river-thames_1.jpg?itok=6LenFxuz" class="img-fluid mt-auto" alt="">
</div>

原理：在flex容器（.row）的子项（.col-md）里，mt-auto会自动把图片上方的margin填充满剩余空间，从而将图片压到列的底部。

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Column img align-bottom demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h2>Column img align-bottom demo</h2>
    <div class="row g-2">
      <div class="col-md border">
        <img src="https://static.homesandproperty.co.uk/s3fs-public/thumbnails/image/2020/11/19/10/HotNotGoodLuckHope.jpg?width=990&auto=webp&quality=75&crop=968%3A645%2Csmart" class="img-fluid">
      </div>
      <!-- 这里用方法2的实现 -->
      <div class="col-md border">
        <img src="https://london.ac.uk/sites/default/files/styles/max_1300x1300/public/2018-10/london-aerial-cityscape-river-thames_1.jpg?itok=6LenFxuz" class="img-fluid mt-auto" alt="">
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

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