Bootstrap 5列内div顶部与底部对齐失效问题排查

你的核心问题是用错了Bootstrap对齐类的适用场景：

• Bootstrap的align-top、align-bottom是针对**水平flex容器（d-flex且默认row方向）**的子元素设计的，用来控制子元素在垂直方向的对齐。但你当前的内容容器（.h-100.border）不是flex容器，所以这些类完全无效。
• 要实现图片顶对齐、文字底对齐，需要把内容容器改成垂直方向的flex布局，再利用margin自动分配空间。

修正后的代码 #

<div class="row">
  <div class="mt-5 col text-center">
    <div class="h-100 border d-flex flex-column">
      <img class="img-fluid" src="example1.png" width="180">
      <div class="mt-auto">
        <p>Paragraph 1</p>
      </div>
    </div>
  </div>
  <div class="mt-5 col text-center">
    <div class="h-100 border d-flex flex-column">
      <img class="img-fluid" src="example2.png" width="180">
      <div class="mt-auto">
        <p>Paragraph 2</p>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

1. 给内容容器添加d-flex flex-column：将容器转为垂直方向的flex布局，内部元素按从上到下排列。
2. 给文字容器添加mt-auto：利用margin自动填充上方剩余空间，把文字模块“推”到容器底部，同时图片因为没有额外margin，默认保持顶部对齐。

这样就完美实现了你要的图片顶对齐、文字底对齐效果，同时保持每个列的高度一致（因为.h-100确保容器占满列的高度）。

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