如何解决 mat-datepicker-toggle 位置问题？

Question

我已成功将材料导入到我的 Angular 8 项目中，并且我正在使用引导程序 用于造型。 我不打算使用所有材料库，仅在需要时使用。日期选择器来自 材料是我需要使用的一个例子。

我尝试使用 mat-datepicker，但遇到了对齐问题 切换。

这是模板：

<input type="text" class="form-control" name="my_date" [matDatepicker]="myDatepicker"
 style="width: 80px;"
 #myDate="ngModel" [(ngModel)]="mydate" id="my_date">                                        
 <mat-datepicker-toggle  matSuffix [for]="myDatepicker"></mat-datepicker-toggle>                                                                                
 <mat-datepicker #myDatepicker></mat-datepicker>  

切换显示并正常运行，但它跳转到新行。 我不希望使用 mat 表单或 mat 表单字段，因为我正在使用 boostrap。 知道如何将切换与文本框的同一行对齐吗？

谢谢。

Answer 1

我能够通过为两个输入应用 div 容器来解决这个问题 以及切换并应用此类：

.date_container {        
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
      }