Bootstrap 5 flex布局子元素如何实现垂直底部对齐？

Bootstrap 5 原生类实现（优先推荐） #

根据你的需求有两种可选实现方式：

• 仅调整p标签单独底部对齐，不改变h1的默认位置：给p标签添加align-self-end类即可。flex布局中align-self属性用于单独控制单个子元素的交叉轴对齐方式，Bootstrap 5 为了适配RTL布局，flex对齐类统一使用end/start命名，而非bottom/top。
  完整代码示例：

  <div class="d-flex">
      <h1>Hello World</h1>
      <p class="ms-auto small align-self-end">Stupid Text</p>
  </div>
  <hr class="my-0">
  

• 如需让flex容器内所有子元素都底部对齐：给外层d-flex容器添加align-items-end类即可，该属性会控制容器内所有子元素的默认交叉轴对齐规则。

自定义CSS实现 #

如果不需要使用Bootstrap内置类，添加对应CSS规则即可实现效果：

• 仅p标签单独对齐：

  /* 选择你要调整的p标签 */
  .d-flex > p.ms-auto.small {
    align-self: flex-end;
  }
  

• 所有子元素统一底部对齐：

  .d-flex {
    align-items: flex-end;
  }
  

之前尝试不生效的原因 #

你之前使用的align-items-bottom等类不符合Bootstrap 5的命名规则，同时align-items系列是父容器属性，添加到子元素上本身也不会生效。

内容的提问来源于stack exchange，提问作者cl.t