Bootstrap5.2中dropdown-menu内order类排序失效问题求助

在使用Bootstrap 5时，发现order类在list-group组件中能正常实现排序效果，但在dropdown-menu组件内完全不起作用。查阅官方文档后仍未找到解决方法，以下是相关代码示例：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item order-5" href="#">Last</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item order-1" href="#">Should be first</a></li>
  </ul>
</div>

问题原因与解决方法 #

核心原因 #

Bootstrap的order类是基于Flexbox布局的工具类，只有在Flex容器的直接子元素上才能生效。默认情况下：

1. dropdown-menu采用的是常规块级布局（display: block），并非Flex容器
2. 你把order类加在了<a>标签上，但它的父元素<li>也不是Flex容器，导致order属性无法发挥作用

修复方案 #

只需要两步就能解决：

1. 给dropdown-menu添加d-flex flex-column类，将其转为垂直方向的Flex容器
2. 把order类从<a>标签移到父元素<li>上，让<li>作为Flex容器的直接子项

修改后的代码：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu d-flex flex-column" aria-labelledby="dropdownMenuButton1">
    <li class="order-5"><a class="dropdown-item" href="#">Last</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li class="order-1"><a class="dropdown-item" href="#">Should be first</a></li>
  </ul>
</div>

补充说明 #

如果需要保留<li>的某些默认样式，也可以单独给每个<li>添加d-flex类，但直接给dropdown-menu设置Flex容器的方式更简洁统一，推荐使用。

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