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

Question

我已成功将材料导入到我的 Angular 8 项目中，并且正在使用 bootstrap 进行样式设置。我不打算使用所有材质库，仅在需要时使用。来自材料的日期选择器是我需要使用的一个示例。

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