使用Bootstrap将两个表单与其他按钮水平对齐（inline）

你的核心问题在于表单默认是块级元素，会占据整行空间，所以没法和前面的两个按钮保持水平排列。用Bootstrap的flex布局类就能轻松解决这个问题，下面是调整后的代码：

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <!-- 用flex容器包裹所有按钮和表单，实现水平对齐+垂直居中+间距控制 -->
      <div class="d-flex align-items-center gap-2">
        <a class="btn btn-primary" href="/employees/new">Add new Employee</a>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Search</button>
        
        <!-- 给表单添加d-inline-block确保它不独占一行 -->
        <form class="d-inline-block" action="../reports/pdf/employees" method="GET">
          <input type="hidden" id="column" th:if="${param.column !=null}" name="column" th:value="${param.column}">
          <input type="hidden" th:if="${param.sort == null}" id="sort" name="sort" value="ASC">
          <input type="hidden" th:if="${param.sort != null}" id="sort" name="sort" th:value="${param.sort}">
          <input type="hidden" th:if="${param.name!=null}" name="name" id="id" th:value="${param.name}">
          <input type="hidden" th:if="${param.surname!=null}" name="surname" id="surname" th:value="${param.surname}">
          <input type="hidden" th:if="${param.hiredate!=null}" name="hiredate" id="hiredate" th:value="${param.hiredate}">
          <input type="hidden" th:if="${param.birthdate!=null}" name="birthdate" id="birthdate" th:value="${param.birthdate}">
          <input type="hidden" th:if="${param.email!=null}" name="email" id="email" th:value="${param.email}">
          <input type="hidden" th:if="${param.address!=null}" name="address" id="address" th:value="${param.address}">
          <input type="hidden" th:if="${param.phone!=null}" name="phone" id="phone" th:value="${param.phone}">
          <button class="btn btn-primary" type="submit">Print pdf report</button>
        </form>
        
        <!-- 同样给第二个表单添加d-inline-block -->
        <form class="d-inline-block" action="../reports/csv/employees" method="GET">
          <input type="hidden" id="column" th:if="${param.column !=null}" name="column" th:value="${param.column}">
          <input type="hidden" th:if="${param.sort == null}" id="sort" name="sort" value="ASC">
          <input type="hidden" th:if="${param.sort != null}" id="sort" name="sort" th:value="${param.sort}">
          <input type="hidden" th:if="${param.name!=null}" name="name" id="id" th:value="${param.name}">
          <input type="hidden" th:if="${param.surname!=null}" name="surname" id="surname" th:value="${param.surname}">
          <input type="hidden" th:if="${param.hiredate!=null}" name="hiredate" id="hiredate" th:value="${param.hiredate}">
          <input type="hidden" th:if="${param.birthdate!=null}" name="birthdate" id="birthdate" th:value="${param.birthdate}">
          <input type="hidden" th:if="${param.email!=null}" name="email" id="email" th:value="${param.email}">
          <input type="hidden" th:if="${param.address!=null}" name="address" id="address" th:value="${param.address}">
          <input type="hidden" th:if="${param.phone!=null}" name="phone" id="phone" th:value="${param.phone}">
          <button class="btn btn-primary" type="submit">Print csv report</button>
        </form>
      </div>
    </div>
  </div>
</div>

关键修改点说明： #

• 新增了d-flex align-items-center gap-2的容器：d-flex让内部元素水平排列，align-items-center保证所有按钮和表单垂直居中对齐，gap-2控制元素之间的间距（Bootstrap 5+支持，如果你用的是Bootstrap 4，可以给每个元素添加mr-2类来设置右边距）
• 给两个表单都添加了d-inline-block类：强制表单以行内块元素展示，不会独占一行，这样就能和前面的普通按钮保持在同一水平线上
• 移除了第一个表单的form-inline：因为我们用flex容器来统一控制布局，form-inline在新版Bootstrap里已经不如flex布局灵活

这样调整后，所有按钮和表单就会整齐地水平排列啦。

内容的提问来源于stack exchange，提问作者Paweł Wójcik