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

Question

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

我尝试使用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>  

切换开关已显示并正常工作，但跳至新行。 我不希望使用垫子形式或垫子形式字段，因为我正在使用boostrap。 任何想法如何将切换框与文本框的同一行对齐？

谢谢。

Answer 1

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

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