Bootstrap 4 的 form-inline 在手机端（<576px）自动回退为 display: block，控件垂直堆叠；这是响应式设计意图，并非 bug，可通过自定义类如 .form-horizontal-sm 配合媒体查询实现小屏横排。
Bootstrap 4 的 form-inline 在手机端（display: block，这不是 bug，而是设计行为——它本就不是为小屏横排服务的。想让表单在手机上也保持横排，得绕过它的断点逻辑，自己接管。
为什么 form-inline 在手机上堆叠是正常现象
Bootstrap 4 的 form-inline 类只在 min-width: 576px（即 sm 断点及以上）才启用 display: flex；低于该宽度时，它会彻底移除 flex 相关样式，回归块级流。这意味着：
- 你在 DevTools 里切到 iPhone SE 模拟器（375px），看到的“堆叠”其实是预期行为
-
form-inline不处理嵌套、不兼容.input-group，也不重置子项的margin或vertical-align - 直接加
!important强行设display: flex会引发对齐错位、换行溢出等问题
用自定义类替代 form-inline 实现全尺寸横排
别改 Bootstrap 源码，也不要用媒体查询手写一堆 @media。直接加一个轻量工具类，在所有尺寸下启用可控 flex：
.form-horizontal-sm {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.form-horizontal-sm .form-control,
.form-horizontal-sm .btn {
margin-top: 0 !important;
margin-bottom: 0 !important;
flex: 1 1 auto;
}
.form-horizontal-sm .btn {
flex: 0 0 auto;
}
然后在 HTML 中使用：
<form class="form-horizontal-sm"> <input type="text" class="form-control" placeholder="搜索"> <button type="submit" class="btn btn-primary">提交</button> </form>
注意几个关键点：
-
gap替代手动margin，避免父子 margin 折叠干扰对齐 -
flex: 1 1 auto让输入框优先收缩，flex: 0 0 auto防止按钮被压扁 - 如果用了
.input-group，必须把它整个包进一个div再作为form-horizontal-sm的直系子项——.input-group自身是display: table，会破坏 flex 上下文
手机横排后按钮和输入框上下不对齐
根本原因是 .form-control 默认 vertical-align: top，而 .btn 是 vertical-align: middle，加上各自带的 margin-top/bottom，导致视觉错位。解决方式很直接：
- 给容器加
align-items-center（Bootstrap 4 支持该工具类） - 重置子项
margin：.form-horizontal-sm .form-control, .form-horizontal-sm .btn { margin: 0; } - 避免在横排容器里混用
label—— label 是块级语义元素，强行 inline 会导致高度计算异常；如需文字说明，改用<span class="text-muted small">提示</span>
真正难调的是嵌套栅格或动态字段
比如你在一个 form-horizontal-sm 里又放了 <div class="row">，或者用 JS 动态插入 .col-6 表单项。这时 flex 流会被打断，因为 .row 自带 display: flex 且设置了负 margin，它和外层 flex 容器形成嵌套 flex 上下文，子项尺寸不再受外层控制。
正确做法是：把栅格逻辑下沉到最内层，例如：
<form class="form-horizontal-sm">
<div class="d-flex flex-wrap w-100">
<div class="col-12 col-md-6 pe-md-2"><input class="form-control"></div>
<div class="col-12 col-md-6 ps-md-2"><input class="form-control"></div>
</div>
<button class="btn btn-primary">提交</button>
</form>
核心原则就一条：不要指望 form-inline 或它的替代品能自动适配任意嵌套结构。它只管直系子项的横向排列，其余交由栅格或 flex 工具类分层处理。
