右对齐单个元素答案

【问题标题】：Right align single element右对齐单个元素
【发布时间】：2021-12-02 07:52:26
【问题描述】：

我想用 Bootstrap 5 将下拉列表中的单个元素右对齐。通常我使用“justify-content-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>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

这只是引导主页中的示例。我在

和标记处尝试了“justify-content-end”。例如，我只希望“另一个动作”右对齐，其他两个左对齐。

【问题讨论】：

引导 5.1.0

标签： html css twitter-bootstrap alignment bootstrap-5

【解决方案1】：

每个具有dropdown-item 类的元素都设置为display: block（意味着它占据了父元素的整个宽度）。如果你想让“Another Action”的文本右对齐，意味着你需要在<a>元素上设置一个text-end的类

【讨论】：

就是这样 - 非常感谢！