Bootstrap 5移除了早期版本中的form-inline类，内联表单的实现方式已经统一到flex布局和栅格系统上。这带来一个直接后果：过去习惯用text-center或者mx-auto做居中的方法，在内联表单里常常看不到效果，因为父容器没有设置主轴对齐，而子元素也没有自动外边距的可用空间。与此同时，要让输入框在不同屏幕宽度下按比例变化，还需要理解col-auto、row-cols和flex-fill这些类在flex容器里的具体行为。
接下来会从flex容器的对齐机制出发，先把内联表单的默认行为讲清楚，再给出水平居中和响应式列宽的具体写法。示例代码可以直接复制到支持Bootstrap 5的项目中运行，所有断点都经过实际测试。
理解内联表单的Flex基础
在Bootstrap 5里，所谓的“内联表单”并不是一个独立组件，而是由d-flex、row、col-auto等类组合出来的布局形态。一个典型的内联表单结构如下：外层通常使用d-flex或者row，内部每个表单控件放入col-auto列，让控件根据内容自动收缩。
这种结构默认的flex-direction是row，主轴上从左到右排列，交叉轴上align-items默认为stretch。如果直接给外层容器添加text-center，它只会影响内联文本的对齐，对flex项目在主轴上的位置没有任何作用。同理，mx-auto只适用于块级元素，flex项目即使设置了左右自动外边距，也只能在有多余空间时生效，而默认情况下没有触发这个条件。
因此，理解main axis（主轴）与cross axis（交叉轴）的区别，是解决内联表单居中问题的第一步。水平居中对应的是主轴对齐，需要改变容器的justify-content属性；而垂直居中则对应align-items。这一点在Bootstrap 5的flex工具类中同样适用。
实现水平居中的两种常用写法
最直接的做法是给内联表单的容器添加justify-content-center类。这个类会把容器的justify-content设置为center，让所有flex项目在主轴方向上居中对齐。如果外层容器同时使用了flex-wrap，在换行后每一行也都会保持居中，不会出现第一行偏左、第二行偏右的杂乱布局。
另一种写法是使用栅格系统的row配合justify-content-center，并在每一列上使用col-auto。这样写的好处是可以继续利用栅格的间距控制和响应式列宽覆盖。需要注意的是，row类本身带有负外边距，如果表单放在一个没有内边距的容器里，可能需要手动处理左右的溢出，或者直接用g-2等间距类来规范空白。
以下代码展示了两种居中方法：第一段使用纯flex工具，第二段使用row加col-auto。两者都能实现水平居中，区别在于间距和后续扩展的便利程度。
<!-- 方法一：纯Flex工具类 -->
<form class="d-flex justify-content-center flex-wrap gap-2">
<input type="text" class="form-control" style="width: auto;" placeholder="用户名">
<select class="form-select" style="width: auto;">
<option>全部状态</option>
<option>启用</option>
</select>
<button class="btn btn-primary" type="submit">查询</button>
</form>
<!-- 方法二：Row + Col-auto -->
<form class="row justify-content-center g-2">
<div class="col-auto">
<input type="text" class="form-control" placeholder="用户名">
</div>
<div class="col-auto">
<select class="form-select">
<option>全部状态</option>
<option>启用</option>
</select>
</div>
<div class="col-auto">
<button class="btn btn-primary" type="submit">查询</button>
</div>
</form>
运行上面的代码时，如果表单控件设置了固定宽度，需要把style中的width改成auto或者直接依赖col-auto，否则控件会保持原有宽度，导致居中后两侧留白不对称。另外，gap-2在较旧的浏览器上可能有兼容性问题，项目需要支持旧浏览器时建议用栅格的间距类代替。
响应式列宽的控制细节
内联表单在很多场景下并不是所有控件都要保持最小宽度。比如一个搜索框希望在手机端占满整行，在平板端占一半宽度，在桌面端保持自动宽度，这时就需要响应式列宽。Bootstrap 5的栅格类可以直接作用在col列上：col-12表示手机端占满12列，col-md-6表示中屏以上占6列，col-lg-auto表示大屏恢复自动宽度。
如果不想使用栅格列，也可以给控件容器添加flex-fill类，让它在主轴上自动填充剩余空间。配合flex-md-fill这类响应式变体，可以只在特定断点生效。不过flex-fill会让控件吃掉所有可用空间，多个flex-fill项目会均分宽度，这是与col-auto的核心区别。
还有一种常见的做法是保留col-auto作为基础，再通过自定义CSS设置min-width和max-width。例如给输入框设置min-width: 200px; max-width: 100%;，然后在父容器上使用flex-wrap，当容器宽度不够时，输入框会自动换行到下一行，而不会被压缩得不可用。
<form class="d-flex flex-wrap justify-content-center gap-2">
<div class="col-auto flex-fill flex-md-grow-0">
<input type="search" class="form-control" placeholder="关键词" style="min-width: 200px; max-width: 100%;">
</div>
<div class="col-auto">
<button class="btn btn-success" type="submit">搜索</button>
</div>
</form>
上述代码里，搜索框在手机上会尽可能占满整行，达到最大宽度后自动换行，按钮保持自动宽度。在中屏及以上，flex-md-grow-0让搜索框恢复自动增长，宽度由min-width决定，整体仍然居中。这种混合方案在真实后台管理界面的筛选栏里非常常见。
完整示例与注意点
下面给出一个稍完整的筛选表单，包含文本输入、下拉选择、日期选择和一个提交按钮，同时实现了水平居中和响应式列宽。这个结构可以直接嵌入到Bootstrap 5的网格页面中。
<div class="container mt-4">
<form class="row justify-content-center g-3">
<div class="col-12 col-sm-6 col-lg-3">
<label class="form-label">用户名</label>
<input type="text" class="form-control" placeholder="输入用户名">
</div>
<div class="col-12 col-sm-6 col-lg-3">
<label class="form-label">状态</label>
<select class="form-select">
<option>全部</option>
<option>启用</option>
<option>禁用</option>
</select>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<label class="form-label">开始日期</label>
<input type="date" class="form-control">
</div>
<div class="col-12 col-sm-6 col-lg-auto d-flex align-items-end">
<button class="btn btn-primary w-100" type="submit">查询</button>
</div>
</form>
</div>
注意几个细节：首先，row类自带--bs-gutter-x变量控制水平间距，使用g-3可以统一设置；其次，日期输入在移动端可能触发原生选择器，宽度行为与文本输入略有不同，建议用form-control保持一致性；最后，按钮列使用了d-flex align-items-end，让按钮底部与输入框底部对齐，否则标签存在时按钮会偏上。
如果还需要让整个表单在页面中水平居中，可以在外层包裹一个d-flex justify-content-center容器，但通常将表单放在container内配合row已经足够。真正需要额外居中的场景是表单本身宽度小于容器宽度且不希望拉伸时。
总而言之，Bootstrap 5中内联表单的水平居中与响应式列宽控制，核心在于正确使用flex工具类与栅格断点。不要盲目套用老版本的text-center或form-inline，要根据主轴对齐和列宽行为进行组合。掌握justify-content-center、col-auto、flex-fill以及col-12 col-md-6这些类的含义，就能解决大部分表单布局问题。
Bootstrap 5内联表单响应式列宽修改时间：2026-10-03 06:38:25