如何使用Bootstrap实现元素各占单独一行的对齐效果

你当前代码的核心问题是row下的flex容器没有占满整行宽度，导致ml-auto无法将第三个元素推到最右侧。
Bootstrap 4 及以上版本的row默认就是display: flex布局，你可以直接复用这一特性简化代码，实现目标效果：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="ml-auto p-2">Flex item</div>
  </div>
</div>

如果你有业务需要必须保留单独的flex容器层，给d-flex添加w-100类让它占满整行宽度即可：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="d-flex w-100">
      <div class="p-2">Flex item</div>
      <div class="p-2">Flex item</div>
      <div class="ml-auto p-2">Flex item</div>
    </div>
  </div>
</div>

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