Html 引导：窗体控件没有响应

我已经为我的angular应用程序创建了一个html UI，不幸的是它没有响应能力。当我最小化屏幕时，控件落在窗口之外。谁能告诉我我做错了什么

屏幕截图-以正常窗口大小打开时的模式窗口

屏幕截图-以最小化窗口大小打开时的模式窗口

代码

.描述标题{
背景色：#FAE7D6；
颜色：黑色
}
.标题{
宽度：8%；
}
.小组标题{
颜色：白色；
背景色：#F59850；
边框颜色：#ddd；
}
.滚动类{
高度：800px；
溢出y：滚动；
溢出x：隐藏；
}
基金详情
编辑模式
名称
{{FundDetails.Entity.NAME}
投资状况
{{FundDetails.InvestmentStatus.NAME}
匿名
{{FundDetails.Entity.u_匿名吗？“是”：“否”}
{{FundDetails.Entity.u_匿名吗？“是”：“否”}
旗舰
{{FundDetails.FlagShipFund？.NAME}
起始日期
{{formatInceptionDate}
账户授权
{{FundDetails.accountcommission？.NAME}
车型
{{FundDetails.VehicleType.NAME}
彭博资讯
{{FundDetails.Entity.BLOOMBERG_TICKER}
小学
{{FundDetails.PrimaryClasses.DESCRIPTION}
细节
拯救
取消
删除

为什么您使用表格而不是引导网格系统进行布局？我强烈建议您不要使用表格进行布局，引导有一个非常好的网格系统可以用于布局。看看你的HTML，但是它可能是你的固定宽度造成的问题-尝试将其更改为%或自动，即

删除固定宽度工作，但考虑使用网格系统，如你所建议的。请给我举一个至少一行使用网格样式的例子好吗。你知道我的UI外观如何，我只是更新了帖子，没有使用表。我最初发布了错误的HTMLW为什么您使用表格进行布局而不是引导网格系统？我强烈建议您不要使用表格进行布局，引导有一个非常好的网格系统可以用于布局。看看你的HTML，但是它可能是你的固定宽度造成的问题-尝试将其更改为%或自动，即

删除固定宽度工作，但考虑使用网格系统，如你所建议的。请给我举一个至少一行使用网格样式的例子好吗。你知道我的UI外观如何，我只是更新了帖子，没有使用表。我最初发布了错误的html

<style>
    .desc-header {
        background-color: #FAE7D6;
        color: black
    }

    .header {
        width: 8%;
    }


    .panel-heading {
        color: white;
        background-color: #F59850;
        border-color: #ddd;
    }

    .scrollClass {
        height: 800px;
        overflow-y: scroll;
        overflow-x: hidden;


    }
</style>



<div class="card">
    <div class="card-header panel-heading">
        <span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
        <div class="pull-right" style="padding-right:10px;">
            <label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
                <input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>

        </div>
    </div>
    <div class="card-body">
        <div *ngIf="FundDetails" class="card-body" style="width:100%">

                <div class="form-group row">
                    <label for="inputName" class="col-md-2  col-form-label modal-label header">Name</label>
                    <div class="col-md-3 ">
                        <div *ngIf="!EditMode">{{FundDetails.Entity.NAME}}</div>
                        <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
                            [(ngModel)]="FundDetails.Entity.NAME" />
                    </div>

                    <label for="inputOffice" class="col-md-2 col-sm-12 col-form-label header">Investment Status</label>
                    <div class="col-md-3 ">
                        <div *ngIf="!EditMode">{{FundDetails.InvestmentStatus.NAME}}</div>
                        <kendo-dropdownlist *ngIf="EditMode" style="width:100%"
                            [(ngModel)]="FundDetails.Entity.INVESTMENT_STATUS_ID"
                            [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME"
                            [valuePrimitive]="true" valueField="ID">
                        </kendo-dropdownlist>
                    </div>
                </div>

            <div class="form-group row">
                <label for="inputTitle" class="col-md-2 col-form-label header">Make Anonymous</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{FundDetails.Entity.IS_ANONYMOUS ? "Yes" : "No"}}</div>
                    <label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.Entity.IS_ANONYMOUS"
                            value="{{FundDetails.Entity.IS_ANONYMOUS}}" [(ngModel)]="FundDetails.Entity.IS_ANONYMOUS"
                            style="width: 13px; height: 13px;" />&nbsp;&nbsp;{{FundDetails.Entity.IS_ANONYMOUS ? "Yes" : "No"}}</label>
                </div>


                <label for="inputEmail" class="col-md-2 col-form-label header">Flagship</label>

                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{FundDetails.FlagShipFund?.NAME}}</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%"
                        [(ngModel)]="FundDetails.Entity.FLAGSHIP_FUND_ID" [data]="FundDetails.FlagshipFunds"
                        [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                    </kendo-dropdownlist>
                </div>

            </div>

            <div class="form-group row">

                <label for="inputFax" class="col-md-2  col-form-label header">Inception Date</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{formatInceptionDate}}</div>
                    <kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd MMM, yyyy'" [(ngModel)]="getInceptionDate">
                    </kendo-datepicker>
                </div>


                <label for="inputEmail" class="col-md-2 col-form-label header">Account Mandate</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{FundDetails.AccountMandate?.NAME}}</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%"
                        [(ngModel)]="FundDetails.Entity.ACCOUNT_MANDATE_ID" [data]="FundDetails.AccountMandates"
                        [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                    </kendo-dropdownlist>
                </div>

            </div>


            <div class="form-group row">
                <label for="inputEmail" class="col-md-2 col-form-label header">Vehicle Type</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{FundDetails.VehicleType.NAME}}</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%"
                        [(ngModel)]="FundDetails.Entity.VEHICLE_TYPE_ID" [data]="FundDetails.VehicleTypes"
                        [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                    </kendo-dropdownlist>
                </div>


                <label for="inputEmail" class="col-md-2 col-form-label header">Bloomberg Ticker</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{FundDetails.Entity.BLOOMBERG_TICKER}}</div>
                    <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
                        [(ngModel)]="FundDetails.Entity.BLOOMBERG_TICKER" />
                </div>

            </div>


            <div class="form-group row">

                <label for="inputEmail" class="col-md-2 col-form-label header">Primary Class</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{FundDetails.PrimaryClasses.DESCRIPTION}}</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%"
                        [(ngModel)]="FundDetails.Entity.PRIMARY_CLASS_ID" [data]="FundDetails.Classes"
                        [filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
                    </kendo-dropdownlist>
                </div>



            </div>



            <!-- Flagship needs to be disable based on user role -->
            <div class="form-group row">




            </div>


            <div class="form-group row">

                <div class="col-md-8" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
                    <div class="desc-header">Details</div>
                    <div class="divEditor">
                        <ckeditor [editor]="Editor" [id]="'ckDetails'" *ngIf="EditMode" style="font-size: 11px;"
                            debounce="500" [config]="EditorConfig"
                            [(ngModel)]="FundDetails.Entity.ACCOUNT_MANDATE_CUSTOMISATION">
                        </ckeditor>
                        <div style="padding: 10px" *ngIf="!EditMode"
                            [innerHTML]="FundDetails.Entity.ACCOUNT_MANDATE_CUSTOMISATION">
                        </div>
                    </div>
                </div>
            </div>





        </div>
        <div class="btn-toolbar" style="padding-top:40px;">


            <span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                    (click)="saveManager()">Save</button>

            </span>
            <span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                    (click)="cancelManager">Cancel</button>
            </span>
            <span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
                    (click)="deleteManager()">Delete</button>
            </span>
        </div>
    </div>
</div>