Bootstrap/Angular13中如何实现三个日期范围选择器同一行对齐

核心错位原因：官方input-daterange类默认是为单组双输入框范围选择器设计的，自带flex布局、负边距、输入框宽度默认规则，一旦嵌套层级错误、和Bootstrap栅格规则冲突，就会出现列宽溢出、元素高低错位、第三列换行的问题。

1. 修正HTML嵌套层级 #

row容器仅作为栅格布局的行容器，绝对不要在row层加input-daterange类，每个col-md-4列内部独立放一组日期选择器，用Bootstrap自带的g-*类控制列间距，不要手动给col加外边距，避免破坏栅格列宽计算规则。
正确结构参考（兼容Angular响应式表单绑定）：

<div class="row g-3 date-range-group">
  <!-- 第一组选择器 -->
  <div class="col-md-4">
    <label class="form-label">统计周期1</label>
    <div class="input-group input-daterange single-picker">
      <input type="text" class="form-control" formControlName="range1Start" placeholder="开始日期">
      <span class="input-group-text">至</span>
      <input type="text" class="form-control" formControlName="range1End" placeholder="结束日期">
    </div>
  </div>
  <!-- 第二组选择器 -->
  <div class="col-md-4">
    <label class="form-label">统计周期2</label>
    <div class="input-group input-daterange single-picker">
      <input type="text" class="form-control" formControlName="range2Start" placeholder="开始日期">
      <span class="input-group-text">至</span>
      <input type="text" class="form-control" formControlName="range2End" placeholder="结束日期">
    </div>
  </div>
  <!-- 第三组选择器 -->
  <div class="col-md-4">
    <label class="form-label">统计周期3</label>
    <div class="input-group input-daterange single-picker">
      <input type="text" class="form-control" formControlName="range3Start" placeholder="开始日期">
      <span class="input-group-text">至</span>
      <input type="text" class="form-control" formControlName="range3End" placeholder="结束日期">
    </div>
  </div>
</div>

常见错误：把input-daterange类加在row容器上，会导致插件把三列共6个输入框识别为同个选择器的起止输入框，样式和交互全部混乱。

2. 覆盖冲突默认样式 #

官方input-daterange默认带的负边距、输入框最小宽度规则会撑破栅格列，加自定义CSS重置即可：

/* 行容器对齐规则：标签高度不一致时，底部输入框自动对齐 */
.date-range-group {
  align-items: end;
}
/* 清除单组选择器默认负边距，宽度适配栅格列 */
.single-picker.input-daterange {
  width: 100%;
  margin: 0;
}
/* 修复flex布局下输入框撑破容器的问题 */
.single-picker.input-daterange input {
  min-width: 0;
  flex: 1 1 auto;
}
/* 可选：统一标签尺寸 */
.date-range-group .form-label {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

3. 插件初始化避坑 #

初始化日期选择器时，逐个选中每组.single-picker容器单独初始化，不要选外层大容器初始化，避免三组选择器的日期联动逻辑混在一起：

import { AfterViewInit, Component } from '@angular/core';
declare var $: any; // 如果用jQuery版本的daterangepicker需要声明

@Component({/* 组件配置 */})
export class DateRangeComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    document.querySelectorAll('.single-picker').forEach(pickerEl => {
      $(pickerEl).datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        // 其余业务配置项
      });
    });
  }
}

版本兼容提示：如果用Bootstrap 5，需要确认引入的日期选择器版本适配BS5，旧版适配BS3/BS4的选择器自带的类名样式会和BS5的input-group规则冲突，替换适配版本即可，不需要额外改大量样式。

内容的提问来源于stack exchange，提问作者Peter The Angular Dude