Bootstrap 4如何实现行内表单与按钮在同一行显示

你遇到的表单换行问题，是因为Bootstrap 4的form-inline类仅控制表单内部的行内布局，表单元素本身默认是块级的flex容器，所以会独占一行触发换行。

最简修改方案 #

直接给<form>标签追加d-inline-flex工具类，将表单本身也设置为行内弹性容器，和前面的按钮、下拉容器保持一致的渲染规则，同时不会影响表单内部的排版逻辑。
修改后代码如下：

<button type="button" class="mb-2 mr-2 btn btn-primary">
    <span>Agregar</span>
</button>
<div class="d-inline dropdown">
  <button aria-haspopup="true" aria-expanded="false" id="menuUtilidades" type="button" class="mr-2 mb-2 dropdown-toggle btn btn-primary">Utilidades</button>
</div>
<div class="d-inline dropdown">
  <button aria-haspopup="true" aria-expanded="false" id="menuReportes" type="button" class="mb-2 dropdown-toggle btn btn-primary">Reportes</button>
</div>
<form class="mb-2 form-inline d-inline-flex">
  <!-- 表单内容 -->
</form>

更灵活的适配方案 #

如果需要更好的小屏适配、对齐控制，推荐把所有元素套在flex布局容器中，可控性更强：

<div class="d-flex align-items-center flex-wrap">
  <button type="button" class="mb-2 mr-2 btn btn-primary">
      <span>Agregar</span>
  </button>
  <div class="dropdown mr-2 mb-2">
    <button aria-haspopup="true" aria-expanded="false" id="menuUtilidades" type="button" class="dropdown-toggle btn btn-primary">Utilidades</button>
  </div>
  <div class="dropdown mb-2 mr-2">
    <button aria-haspopup="true" aria-expanded="false" id="menuReportes" type="button" class="dropdown-toggle btn btn-primary">Reportes</button>
  </div>
  <form class="mb-2 form-inline">
    <!-- 表单内容 -->
  </form>
</div>

该方案的优势：

• align-items-center可让所有元素垂直居中对齐，避免元素高度不一致导致的错位
• flex-wrap可在视口宽度不足时让元素自动换行，不会出现横向溢出
• 后续调整元素间距、排序的成本更低

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