如何将Bootstrap模态框底部Cancel按钮左移，Close/Save按钮保持右对齐？

Bootstrap的modal-footer默认使用Flex布局，因此float:left不会生效，你可以通过内置的Flex工具类实现需求：

给Cancel按钮添加me-auto类，该类会设置margin-right: auto，在Flex容器中它会自动占据左侧空间，将后续的Close和Save按钮推到右侧。

修改后的完整代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <!-- 添加me-auto类让Cancel按钮左对齐 -->
        <button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
        
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

原理说明 #

• modal-footer默认是Flex容器（自带d-flex类），Flex布局下float属性会被忽略，因此直接使用float:left无效。
• me-auto是Bootstrap的margin工具类，对应margin-right: auto，在Flex容器中，这个属性会让当前元素尽可能占据左侧空间，迫使后续元素自动右对齐，完全匹配你需要的布局效果。

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