如何使用Bootstrap实现表单input与button同排无间距且宽度占满？

直接使用 Bootstrap 原生的input-group组件即可实现需求，无需额外自定义样式，兼容 Bootstrap 4、5 版本。

具体实现步骤：

• 外层用input-group标签包裹输入框与按钮，该组件原生消除了两个控件之间的间距，默认呈现无缝拼接的整体效果
• 给外层input-group添加边距工具类实现你要的外边距要求：mt-*控制顶部外边距，mx-*控制左右两侧外边距，*可选数值为0-5，数值越大边距越大，按需调整即可
• 输入框添加form-control类、按钮添加btn类，保持控件原有默认尺寸样式，外层input-group默认占满父容器100%宽度，无需额外设置宽度

代码示例：

<div class="input-group mt-3 mx-3">
  <input type="text" class="form-control" placeholder="请输入内容">
  <button class="btn btn-primary" type="submit">确认</button>
</div>

如果需要调整控件整体尺寸，只需给外层input-group添加input-group-lg（大号）或input-group-sm（小号）类即可，不会破坏拼接效果。

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