Bootstrap5导航栏按钮折为两行时如何实现右对齐

问题复现 #

• 导航栏右侧配置按钮组，在小宽度设备（如智能手机）访问时，按钮容器宽度不足会将两个按钮折为两行显示
• 折行状态下按钮默认左对齐，无法实现两行按钮统一靠右的预期效果
• 原有代码中给按钮添加的align-self-end属性未生效，无法控制折行后的对齐方向

问题根因 #

align-self-end是Flex布局子项的交叉轴对齐属性，仅对单行Flex容器生效。当前包裹按钮的容器是普通块级元素，折行时行内内容默认继承左对齐规则，因此按钮始终靠左排列。

修复后完整代码 #

<!-- Bootstrap5 资源引入 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- 导航栏结构 -->
<nav class="navbar navbar-expand d-flex justify-content-around" style="box-shadow: 0 2px 0 #202020;">
  <div>
    <a class="btn btn-orange m-1" href="./projects">Projekte</a>
  </div>
  <a href="./">
    <img class="my-1" id="logo" src="./res/fnbg-logo6.svg" alt="FNBG Logo">
  </a>
  <!-- 核心修改区域 -->
  <div class="border me-2 text-end">
    <a class="btn btn-orange m-1" target="_blank" href="mailto:a@bc.de">a@bc.de</a>
    <a class="btn btn-orange m-1" target="_blank" href="https://linkedin.com/in/abcde/">LinkedIn</a>
  </div>
</nav>

修改说明 #

• 核心改动：给右侧包裹按钮的块级容器添加Bootstrap内置的text-end类，对应CSS规则为text-align: right。按钮属于行内块元素，会受文本对齐属性控制，无论容器宽度是否足够、是否折行，容器内所有行内内容都会统一靠右排列。
• 冗余清理：移除两个按钮上无效的align-self-end类，该属性仅在父元素为Flex容器时作用于交叉轴对齐，当前父容器为普通块级元素，该属性无实际效果。
• 规范修正：将原代码中非标准的<image>标签替换为标准HTML标签<img>，避免部分浏览器出现解析异常。

可选实现方案：如果需要将按钮容器改为Flex布局实现对齐，可将按钮容器的类替换为d-flex flex-wrap justify-content-end，通过Flex主轴右对齐+自动折行的规则实现相同效果，两种方案均兼容所有屏幕尺寸。

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