右侧的控件无法与style =“ float：right”配合使用

Question

我试图将控件正确显示在屏幕的右侧。我试图在外部div上应用style =“ float：right”，但显示不正确。另外我在每个控件之后都应用了。仅供参考，我正在使用bootstrap v4。有人可以告诉我我要去哪里错了。

这是堆炸弹

https://stackblitz.com/edit/angular-rb9d3n

HTML

<style>

</style>


<div style="width: 100%; padding-bottom: 20px; border-bottom: 1px solid #A8A8A8">
    <input-file placeholder="Select or drop files here..."  [(ngModel)]="Files"></input-file>
    <br/>
    <button type="button" class="btn btn-primary" (click)="postFiles()" [disabled]="!Files || Files.length == 0"
        style="width: 10rem;" title="Wait">Upload&nbsp;&nbsp;<i class="fas fa-paperclip"></i>&nbsp;&nbsp;<img
        *ngIf="Uploading" src="../images/ajax-loader2.gif" style="width: 20px; height: 20px;"
        title="Select Attachments" /></button><span style="color:red; padding-left: 20px" *ngIf="Error && Error.length > 0">{{Error}}</span>
</div>

<div>
        <label for="inputEmail" class="col-form-label modal-label" style="width: 100px;">Type</label>


        <kendo-dropdownlist style="width:250px"
            class="form-control  form-control-sm"
             [filterable]="false"
            textField="Name" [valuePrimitive]="false" valueField="Id" 
            [defaultItem]="defaultItem"
            >
        </kendo-dropdownlist> &nbsp;


           <button type="button" class="btn btn-primary" style="width: 250px">Show Archived</button>  &nbsp;&nbsp;
           <button type="button" class="btn btn-primary" style="width: 250px">Include Related</button>   &nbsp;&nbsp;
           <label for="inputEmail" class="col-form-label modal-label" style="width: 100px">Name Filter</label>
           <input kendoTextBox  style="width: 250px" />

</div>


<div class="card" style="margin-top: 10px">
    <div class="card-body" style="width:100%; text-align: left;">
        <div style="overflow-x: hidden; overflow-y: hidden; ">
            <div class="form-group row">
                <div class="panel panel-default col-md-12  ">
                    <div class="panel-body">
                        <div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100"
                            style="float: left;">
                            <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions"
                                style="width: 100%; height: 100%" [columnDefs]="ColumnDefs"
                                rowHeight="30"
                                headerHeight="30" rowSelection="single">
                            </ag-grid-angular>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

屏幕截图-这是我要实现的目标

尝试了Bootstrap网格系统

<div class="row">
    <div class="col-md-6"></div>

    <div class="col-md-2"><label style="width: 20%" for="inputEmail" class="modal-label">Type</label>


        <kendo-dropdownlist class="form-control  form-control-sm" style="width: 80%" [filterable]="false"
            textField="Name" [valuePrimitive]="false" valueField="Id" [defaultItem]="defaultItem">
        </kendo-dropdownlist>
    </div>

    <div class="col-md-1"> <button type="button" class="btn btn-primary">Show Archived</button></div>
    <div class="col-md-1"> <button type="button" class="btn btn-primary">Include Related</button></div>
    <div class="col-md-2"> <label for="inputEmail" style="width: 30%" class="modal-label">Name
            Filter</label>
        <input kendoTextBox style="width: 70%" /> </div>

</div>