如何使用Bootstrap5将不同表单中的两个按钮对齐在同一行？

你的问题核心是两个分属不同表单的按钮当前上下排列，想要让它们横向并排，以下是两种适配Bootstrap5.3的实现方式：

方法1：调整按钮所在元素的显示方式 #

给第一个表单内的按钮容器添加行内块类，同时给第二个表单也设置行内块样式，让它们在同一行展示：

<div class="col-6 offset-3">
  <form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
    <!-- 原有所有输入项内容 -->
    <!-- 修改按钮所在div的类，添加行内块和间距类 -->
    <div class="mb-3 d-inline-block me-2"><button class="btn btn-success">Save</button></div>
  </form>
  
  <!-- 给删除按钮所在表单添加行内块类 -->
  <form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST" class="d-inline-block">
    <button class="btn btn-danger">Delete</button>
  </form>
</div>

方法2：用Flex容器统一管理按钮（更推荐） #

把两个按钮从原表单结构中调整到同一个Flex容器里，通过form属性让Save按钮关联到编辑表单，这样布局更清晰，也能保证表单功能正常：

<div class="col-6 offset-3">
  <!-- 给编辑表单设置id，用于按钮关联 -->
  <form id="edit-camp-form" action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
    <!-- 原有所有输入项内容，移除原来的Save按钮div -->
  </form>
  
  <!-- 用d-flex创建横向布局容器，gap-2设置按钮间距 -->
  <div class="d-flex gap-2">
    <!-- 通过form属性关联到编辑表单 -->
    <button class="btn btn-success" form="edit-camp-form">Save</button>
    <!-- 删除按钮保留在自己的表单内 -->
    <form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
      <button class="btn btn-danger">Delete</button>
    </form>
  </div>
</div>

补充说明 #

• 两种方法都兼容Bootstrap5.3版本，d-inline-block用于将块级元素转为行内块，d-flex是Bootstrap的Flex布局类，gap-2和me-2用于设置元素间距，避免按钮紧贴。
• 方法2的优势在于按钮布局独立于表单主体结构，后续调整样式更灵活，同时符合HTML规范（通过form属性关联外部按钮和表单）。

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