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

Question

我已经成功地将素材导入到我的Angular 8项目中，并且我正在使用bootstrap进行样式设置。我不打算使用所有的材质库，只有在需要的时候。Datepicker from material是我需要使用的一个例子。

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