如何借助Bootstrap将Select与Input等表单组元素同行排布？

嘿，我来帮你搞定这个Bootstrap表单元素间距的问题！其实Bootstrap本身就自带了专门的组件来实现表单控件的无缝组合，不用你额外写CSS去调整间距。

核心就是用Bootstrap的input-group容器，它会自动处理内部表单控件（比如<select>、<input>）之间的间距，同时保证控件高度对齐、样式统一。下面分不同Bootstrap版本给你具体示例：

Bootstrap 5 写法 #

Bootstrap 5里的选择框类名改成了form-select，直接和form-control一起放进input-group就行：

<!-- Select 在左侧，Input 在右侧 -->
<div class="input-group">
  <select class="form-select" aria-label="选择选项">
    <option selected>请选择...</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  <input type="text" class="form-control" placeholder="输入内容" aria-label="文本输入框">
</div>

<!-- 反过来，Input 在左侧，Select 在右侧 -->
<div class="input-group mt-3">
  <input type="text" class="form-control" placeholder="输入内容" aria-label="文本输入框">
  <select class="form-select" aria-label="选择选项">
    <option selected>请选择...</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
</div>

Bootstrap 4 写法 #

Bootstrap 4里的选择框需要用custom-select类，容器同样是input-group：

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>请选择...</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  <input type="text" class="form-control" placeholder="输入内容">
</div>

常见误区提醒 #

你之前可能用了普通的form-group或者row+col来摆放控件，这两种方式都会因为默认的padding/margin产生间距——form-group是用来垂直排列表单控件的，而row+col的栅格系统本身就有列间距，都不适合用来做控件的无缝横向组合。

如果还要搭配按钮等其他元素，Bootstrap 5里可以直接把按钮放进input-group；Bootstrap 4则需要用input-group-prepend/input-group-append来包裹按钮，比如：

<!-- Bootstrap 4 带按钮的组合 -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="输入内容">
  <div class="input-group-append">
    <select class="custom-select" id="inputGroupSelect02">
      <option selected>请选择...</option>
      <option value="1">选项1</option>
    </select>
    <button class="btn btn-outline-secondary" type="button">提交</button>
  </div>
</div>

这样组合出来的表单控件不仅没有间距，还能保持Bootstrap统一的样式和响应式效果~

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