Bootstrap5表单中开始与结束日期模块无法对齐问题求助

问题原因 #

• 其余表单控件均采用Bootstrap横向栅格表单规范，.form-group添加了row类，标签配置col-sm-3 col-form-label固定左侧宽度，输入区域外层包裹col-sm-9适配右侧空间，布局规则统一
• 两个日期选择模块的.form-group未添加row类，标签和输入区域也没有配置对应的栅格类，结构和其余表单项不一致导致错位
• 日期输入组未设置和其余输入框一致的max-width: 300px限制，宽度不匹配进一步拉大了对齐差异

修复方案 #

调整两个日期模块的HTML结构，对齐其余表单项的布局规则即可，修改后的代码如下：

<!-- 开始日期模块 -->
<div class="col-12 col-lg-4">
  <div class="form-group row" >
    <label for="beginDate" class="col-sm-3 col-form-label">开始日期</label>
    <div class="col-12 col-sm-9">
      <div class="input-group" style="max-width: 300px;">
        <input name="beginDate" id="beginDate" type="text" class="form-control"
        style="background-color: white; "
        (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
        <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
        ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
        (ngModelChange)="changedBeginDate($event)"
        style="position: absolute; left: 0; visibility: hidden">
        <div class="input-group-append" (click)="dp1.toggle()">
          <span class="input-group-text" id="basic-addon2">
          <i class="icon-regular i-Calendar-4"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 结束日期模块 -->
<div class="col-12 col-lg-4">
  <div class="form-group row" >
    <label for="endDate" class="col-sm-3 col-form-label">结束日期</label>
    <div class="col-12 col-sm-9">
      <div class="input-group" style="max-width: 300px;">
        <input name="endDate" id="endDate" type="text" class="form-control"
        style="background-color: white;"
        (ngModelChange)="changedEndDateInput($event)" [(ngModel)]="endDate">
        <input id="picker2" class="form-control" placeholder="dd/mm/yyyy" name="dp2"
        ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="end.validityDate"
        (ngModelChange)="changedEndDate($event)"
        style="position: absolute; left: 0; visibility: hidden">
        <div class="input-group-append" (click)="dp2.toggle()">
          <span class="input-group-text" id="basic-addon2">
          <i class="icon-regular i-Calendar-4"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

调整点说明 #

• 给日期模块的.form-group添加row类，统一布局结构
• 日期标签新增col-sm-3 col-form-label类，和其余表单项的标签宽度、垂直对齐方式完全一致
• 日期输入组外层包裹col-sm-9类，适配栅格布局的右侧空间规则
• 给.input-group添加max-width: 300px样式，和其余输入框的宽度限制保持统一
• 修正了原代码中两个日期隐藏选择框id重复的问题，将结束日期的选择框id改为picker2避免功能冲突

原问题实际效果截图：

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