不在bsModal中时，标签和输入文本会相互重叠

Question

我正在使用asp.net样板Angular框架，我试图使用用户添加弹出窗口中的标签/文本字段，即：

<div class="form-group form-float">
                    <div class="form-line">
                        <input id="editevent-name" class="form-control" type="text" name="Name" [(ngModel)]="event.name" required maxlength="64" minlength="1" class="validate form-control">
                        <label for="editevent-name" class="form-label">{{l("Name")}}</label>
                    </div>
                </div>

似乎在bsModal中使用它时效果很好，但在页面中使用时，标签不会在编辑文本上方移动，请参阅附图。例如：

<div class="row clearfix" [@routerTransition]>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card main-content">
            <div class="header">
                <h2>
                    {{event.name}} <span class="event-detail-header"><i class="fa fa-calendar"></i> </span>
                </h2>
                <ul class="header-dropdown m-r--5">
                    <li>
                        <!--<div class="btn-group" role="group">-->
                            <!--<button type="button" [routerLink]="['/app/events']" class="btn bg-black waves-effect waves-light"><i class="fa fa-arrow-circle-left"></i> {{l('BackToEvents')}}</button> -->
                            <button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="backToPreviousPage()">
                                {{l("Cancel")}}
                            </button>
                    </li>
                    <li>
                            <button [disabled]="saving" type="submit" class="btn btn-primary waves-effect" (click)="save()">
                                {{l("Save")}}
                            </button>
                        <!--</div>-->
                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <i class="material-icons">more_vert</i>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="javascript:void(0);" class="waves-effect" (click)="refresh();"><i class="material-icons">refresh</i> {{l('Refresh')}}</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="body">
                <div class="form-group form-float">
                    <div class="form-line">
                        <input id="editevent-name" class="form-control" type="text" name="Name" [(ngModel)]="event.name" required maxlength="64" minlength="1" class="validate form-control">
                        <label for="editevent-name" class="form-label">{{l("Name")}}</label>
                    </div>
                </div>
                <div class="form-group form-float">
                    <div class="form-line">
                        <textarea id="editevent-description" name="Description" [(ngModel)]="event.description" class="validate form-control"></textarea>
                        <label for="editevent-description" class="form-label">{{l("Description")}}</label>

                    </div>
                </div>
            </div> 
        </div>
    </div>
</div>

example of overlap