如何使用Bootstrap表单将所有输入框对齐到同一行

你当前使用的是Bootstrap表单栅格布局，对齐异常核心是搜索按钮所在列没有和前面带label的表单项做对齐适配，修改点如下：

• 给按钮所在的col-md-3容器添加适配规则，要么加空label占位和其他项高度匹配，要么用弹性盒对齐类实现底部对齐
• 给按钮添加Bootstrap基础按钮类，按需加form-control类让宽度和输入框一致
• 补全所有输入框的id属性，和对应label的for属性匹配，符合可访问性要求

修改后的完整代码如下：

<form>
  <div class="form-row">
    <div class="form-group col-md-3">
      <label for="firstname">FirstName</label>
      <input type="text" class="form-control" id="firstname">
    </div>
    <div class="form-group col-md-3">
      <label for="lastname">last name</label>
      <input type="text" class="form-control" id="lastname">
    </div>
    <div class="form-group col-md-3">
      <label for="idnumber">identification no</label>
      <input type="text" class="form-control" id="idnumber">
    </div>
    <div class="form-group col-md-3 d-flex flex-column">
      <label>&nbsp;</label>
      <button type="button" class="btn btn-primary form-control">
        <i class="fas fa-search"></i>
      </button>
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">email</label>
    <input type="text" class="form-control" id="inputAddress">
  </div>
</form>

如果不想加空label，也可以用对齐类实现，把第四列的代码替换为：

<div class="form-group col-md-3 d-flex align-items-end">
  <button type="button" class="btn btn-primary form-control">
    <i class="fas fa-search"></i>
  </button>
</div>

两种方案都可以实现第一行所有控件底部对齐，符合预期效果。

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