Bootstrap布局问题：DropDownList与Button无法和输入框垂直对齐

核心修改方案 #

• 将最后一列的align-items-center替换为align-items-start，让下拉框和按钮与左侧日期选择器顶部对齐
• 可选：给按钮添加ms-2类，保持与下拉框的合理间距

修改后的完整代码 #

<div className="row">
  <div className="col-md-3">
    <DateTimePickerComponent
      id="dateFrom"
      name="dateFrom"
      placeholder="Date from"
    />
    <div className="d-flex align-items-center error-container">
      {searchForm.touched.dateFromError && Boolean(searchForm.errors.dateFromError) && (
        <span className="text-danger small">{searchForm.errors.dateFromError}</span>
      )}
    </div>
  </div>
  <div className="col-md-4">
    <DateTimePickerComponent
      id="dateTo"
      name="dateTo"
      placeholder="Date to"
    />
    <div className="d-flex align-items-center error-container">
      {/* 修正原代码的字段错误：应绑定dateToError而非dateFromError */}
      {searchForm.touched.dateToError && Boolean(searchForm.errors.dateToError) && (
        <span className="text-danger small">{searchForm.errors.dateToError}</span>
      )}
    </div>
  </div>

  <div className="col-md-4 d-flex align-items-start">
    <DropDownListComponent
      id="vouType"
      dataSource={sessionLists}
    />
    <Button variant="outlined" className="ms-2">Detail</Button>
  </div>
</div>

补充说明 #

• align-items-start是Bootstrap flex布局类，作用是让flex容器内的元素在垂直方向上靠顶部对齐，正好替代原有的垂直居中逻辑
• 原代码中第二个日期选择器的错误提示绑定了错误字段，已同步修正，避免错误提示逻辑混乱

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