Bootstrap 5 Dropdown 菜单项caret（插入符号）右对齐实现咨询

可以实现，无需改动Bootstrap核心源码，通过内置工具类或少量自定义CSS就能达到下图所示的右对齐效果：

方法1：使用内置工具类（无需额外写CSS，推荐） #

给带dropdown-toggle属性的按钮/菜单项添加弹性布局相关的内置工具类即可，示例代码如下：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle w-100 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    一级下拉菜单
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">普通选项</a></li>
    <!-- 带二级下拉的菜单项，caret自动右对齐 -->
    <li class="dropend">
      <button class="dropdown-item dropdown-toggle w-100 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        二级菜单选项
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">二级选项</a></li>
      </ul>
    </li>
  </ul>
</div>

用到的内置类说明：

• d-flex：将元素转为弹性盒布局容器
• justify-content-between：让容器内元素两端对齐，文字居左，caret自动居右
• align-items-center：让文字和caret垂直居中，避免错位
• w-100：让触发元素撑满父容器宽度，留出caret右对齐的空间

方法2：自定义CSS全局生效 #

如果希望所有下拉菜单项的caret默认右对齐，无需逐个加类，添加以下CSS规则即可：

/* 适配带下拉功能的菜单项 */
.dropdown-item.dropdown-toggle {
  display: flex;
  align-items: center;
  width: 100%;
}
/* 将默认caret伪元素推到最右侧 */
.dropdown-item.dropdown-toggle::after {
  margin-left: auto;
}

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