Bootstrap 4中如何实现多表单并排显示？现有代码无法生效

嘿，我来帮你搞定这个表单并排的问题！你原来的代码没法正常运行，主要有两个关键点需要调整：

1. Bootstrap 4已经弃用了pull-right类，取而代之的是float-right，但其实用浮动来实现表单并排并不是最优解；
2. form-inline是用来让**单个表单内部的控件（比如输入框和按钮）**横向排列的，不是用来让多个独立表单并排的。

下面给你两种简单靠谱的实现方式：

方法一：用Bootstrap网格系统（推荐，响应式友好） #

把两个表单放在row容器里，每个表单用col-auto来自动适应宽度，还能轻松控制间距：

<div class="bd-example">
  <div class="row">
    <!-- 第一个表单 -->
    <div class="col-auto">
      <form id="validate-form" method="post" role="form">
        <input type="hidden" name="get_final_form">
        <button class="btn btn-outline-primary" name="btn" type="submit" value="Validate">Validate</button>
      </form>
    </div>
    <!-- 第二个表单，加ml-2来增加左边间距 -->
    <div class="col-auto ml-2">
      <form id="new-form" method="post" action="index.php" role="form">
        <!-- 这里补全你需要的表单元素，比如提交按钮 -->
        <button class="btn btn-outline-secondary" type="submit">New Form</button>
      </form>
    </div>
  </div>
</div>

方法二：用Flex布局（更简洁） #

直接给父容器加上d-flex类，让子元素（表单）横向排列，用mr-2给第一个表单加右边间距：

<div class="bd-example d-flex">
  <form id="validate-form" method="post" role="form" class="mr-2">
    <input type="hidden" name="get_final_form">
    <button class="btn btn-outline-primary" name="btn" type="submit" value="Validate">Validate</button>
  </form>
  <form id="new-form" method="post" action="index.php" role="form">
    <button class="btn btn-outline-secondary" type="submit">New Form</button>
  </form>
</div>

额外提醒 #

• 如果你的表单里有输入框、下拉框等控件，记得在表单内部用form-group或者form-inline来处理控件的横向排列；
• 避免混用浮动和flex布局，保持代码的一致性，这样更容易维护哦。

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