如何解决Bootstrap5下拉列表单个元素右对齐不生效的问题

实现方法 #

你之前的方案失效是因为justify-content仅对flex布局容器生效，且你需要的是单选项文本右对齐，使用Bootstrap 5自带的文本对齐类就能直接实现：
只需要给目标dropdown-item添加text-end类即可，修改后的代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<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" href="#">Action</a></li>
    <!-- 仅给需要右对齐的选项加text-end类 -->
    <li><a class="dropdown-item text-end" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

如果确实需要用flex对齐的方案实现，给目标dropdown-item加justify-content-end类也可以生效，注意不要加在父级li标签上，要直接加在a.dropdown-item元素上即可。

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