Bootstrap中button无法与其他component同行对齐，需设置什么class属性？

目前按钮显示在其他组件的上方，效果示意图如下：

相关代码如下：

<div className="row mb-12">
  <div className="col-md-3">
    <label htmlFor="noOfSubjects">No Of Subjects</label>
    <Field className="form-control" name="noOfSubjects" type="number" placeholder="Enter the number of subjects" />
    <p className="text-danger">
      <ErrorMessage name="noOfSubjects" />
    </p>
  </div>

  <div className="col-md-3">
    <label htmlFor="startDate">Start Date</label>
    <Field id="startDate" type="date" name="startDate" className="form-control" placeholder="Enter the Start Date" />
    <p className="text-danger">
      <ErrorMessage name="startDate" />
    </p>
  </div>

  <div className="col-md-3">
    <label htmlFor="endDate">End Date</label>
    <Field id="endDate" type="date" name="endDate" className="form-control" placeholder="Enter the End Date" />
    <p className="text-danger">
      <ErrorMessage name="endDate" />
    </p>
  </div>

  <div className="col-md-3">
    <button className="btn btn-primary btn-block offset-md-3" type="submit">Search Certificate</button>
  </div>
</div>

需要设置什么class属性才能实现按钮与其他组件同行对齐？

解决方案 #

你当前使用的是Bootstrap网格布局，错位有两个核心原因：一是按钮所在列没有和前面的输入框列设置统一的对齐规则，二是按钮上多余的偏移类导致布局异常。修改方式如下：

1. 给最外层的row容器添加align-items-end类，这是Bootstrap自带的flex对齐属性，会让整行所有列元素沿底部对齐，刚好匹配输入框的底部位置，不需要手动调整边距。
2. 移除button上的offset-md-3类，你外层已经是col-md-3容器，内部加偏移会导致按钮宽度超出容器范围，反而会出现换行或错位。

修改后的完整代码参考：

<div className="row mb-12 align-items-end">
  <div className="col-md-3">
    <label htmlFor="noOfSubjects">No Of Subjects</label>
    <Field className="form-control" name="noOfSubjects" type="number" placeholder="Enter the number of subjects" />
    <p className="text-danger">
      <ErrorMessage name="noOfSubjects" />
    </p>
  </div>

  <div className="col-md-3">
    <label htmlFor="startDate">Start Date</label>
    <Field id="startDate" type="date" name="startDate" className="form-control" placeholder="Enter the Start Date" />
    <p className="text-danger">
      <ErrorMessage name="startDate" />
    </p>
  </div>

  <div className="col-md-3">
    <label htmlFor="endDate">End Date</label>
    <Field id="endDate" type="date" name="endDate" className="form-control" placeholder="Enter the End Date" />
    <p className="text-danger">
      <ErrorMessage name="endDate" />
    </p>
  </div>

  <div className="col-md-3">
    <button className="btn btn-primary btn-block" type="submit">Search Certificate</button>
  </div>
</div>

如果不想用flex对齐的方案，也可以在按钮前面加一个空的label标签占位，和前面三列的结构保持一致就能自然对齐：

<div className="col-md-3">
  <label>&nbsp;</label>
  <button className="btn btn-primary btn-block" type="submit">Search Certificate</button>
</div>

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