标签和控件未正确对齐

Question

我正在使用Bootstrap 4.3设计HTML模板，但列对齐方式存在问题。我是Boostrap的新手，因此很难对齐。如果您发现列换行中的某些文本，并且控件后面的列当前未对齐，因为第一列的宽度有所不同。我需要使第一列的宽度保持一致，以便随后的控件从上到下正确对齐。我已将col-md-1应用于标签。将其增加到col-md2使其更长。有人可以帮我吗

请参见下面的屏幕截图

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; ">Firm 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">

        <form [formGroup]="frmFirm" (ngSubmit)="onSubmit()">
            <div *ngIf="FirmDetails && FirmDetails.Firm" class="card-body scrollClass" style="width:100%">

                <div  class="form-group row">
                    <label for="inputName" class="col-md-1 col-form-label modal-label header">Name</label>
                    <div class="col-md-3">
                        <div *ngIf="!EditMode">{{FirmDetails.Firm.NAME}}</div>
                        <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
                            formControlName="firmName" />
                    </div>


                </div>

                <div class="form-group row">
                    <label for="inputTitle" class="col-md-1 col-form-label header">Short Name</label>
                    <div class="col-md-3">
                        <div *ngIf="!EditMode">{{FirmDetails.Firm.SHORT_NAME}}</div>
                        <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
                            formControlName="shortName" />
                    </div>
                </div>

                <div class="form-group row">
                    <label for="inputEmail" class="col-md-1 col-form-label header">Alternate Name</label>
                    <div class="col-md-3">
                        <div *ngIf="!EditMode">{{FirmDetails.Firm.ALTERNATE_NAME}}</div>
                        <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
                            formControlName="alternateName" />
                    </div>
                </div>

                <div class="form-group row">
                    <label for="inputEmail" class="col-md-1 col-form-label header">Date Founded</label>
                    <div class="col-md-3">
                        <div *ngIf="!EditMode">{{dateFoundedDate}}</div>
                        <kendo-datepicker *ngIf="EditMode" [format]="'MMMM yyyy'" formControlName="dateFounded">
                        </kendo-datepicker>
                    </div>
                </div>


                <div class="form-group row">
                    <label for="inputEmail" class="col-md-1 col-form-label header">Intralinks Connections</label>
                    <div class="col-md-9">
                        <div class="form-group row">
                            <div class="col-md-3">
                                <label for="inputEmail">User Name</label>
                            </div>
                            <div class="col-md-3">
                                <label for="inputEmail">Password</label>
                            </div>
                        </div>


                        <div formArrayName="intraLinks"
                            *ngFor="let item of frmFirm.get('intraLinks').controls; let i = index; let last = last">
                            <div [formGroupName]="i">
                                <div class="form-group row">
                                    <div class="col-md-3">
                                        <input style="width:100%" formControlName="intraUsername"
                                            placeholder="User Name">
                                    </div>
                                    <div class="col-md-3">
                                        <input style="width:100%" formControlName="intraPassword"
                                            placeholder="Password">
                                    </div>
                                    <div *ngIf="EditMode" class="col-md-3">
                                        <button class="fa fa-trash" (click)="removeCredentials()"></button>
                                    </div>
                                </div>


                            </div>

                        </div>
                        <div *ngIf="EditMode">
                            <button (click)="addCredentials()">Add Credentials</button>
                        </div>
                    </div>
                </div>


                <div class="form-group row">
                    <label for="inputEmail" class="col-md-1 col-form-label header">Key Contact</label>
                    <div class="col-md-3">
                        <div *ngIf="!EditMode && FirmDetails.People">{{FirmDetails.KeyContact.Name}}</div>
                        <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [data]="FirmDetails.People"
                            formControlName="People" [defaultItem]="FirmDetails.KeyContact.Name" [valuePrimitive]="true"
                            [filterable]="false" textField="Name" valueField="ID"></kendo-dropdownlist>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="inputEmail" class="col-md-1 col-form-label header">Websites</label>
                    <div class="col-md-9">
                        <div class="form-group row">
                            <div class="col-md-3">
                                <label for="inputEmail">Website URL</label>
                            </div>
                            <div class="col-md-3">
                                <label for="inputEmail">User Name</label>
                            </div>
                            <div class="col-md-3">
                                <label for="inputEmail">Password</label>
                            </div>
                        </div>


                        <div formArrayName="websites"
                            *ngFor="let item of frmFirm.get('websites').controls; let i = index; let last = last">
                            <div [formGroupName]="i">
                                <div class="form-group row">
                                    <div class="col-md-3">
                                        <input style="width:100%" formControlName="websiteUrl"
                                            placeholder="Website Url">
                                    </div>
                                    <div class="col-md-3">
                                        <input style="width:100%" formControlName="username" placeholder="User Name">
                                    </div>
                                    <div class="col-md-3">
                                        <input style="width:100%" formControlName="password" placeholder="Password">
                                    </div>
                                    <div *ngIf="EditMode" class="col-md-3">
                                        <button (click)="removeWebsite()">Remove Website</button>
                                    </div>
                                </div>


                            </div>

                        </div>
                        <div *ngIf="EditMode">
                            <button (click)="addWebsite()">Add Website</button>
                        </div>
                    </div>
                </div>


                <div class="form-group row">
                    <!-- <label for="inputEmail" class="col-md-1 col-form-label header">Addresses</label> -->
                    <div class="col-md-9">
                        <!-- <div *ngIf="!EditMode">{{FirmDetails.Firm.Addresses}}</div> -->
                        <!-- <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" /> -->

                        <div formArrayName="addressess"
                            *ngFor="let item of frmFirm.get('addressess').controls; let i = index;">

                            <div [formGroupName]="i">

                                <div class="form-group row">
                                    <label class="col-md-1 col-form-label header" attr.for="{{'streetId' + i}}">Street
                                        1</label>
                                    <div class="col-md-9">
                                        <input class="form-control" id="{{'streetId' + i}}" type="text"
                                            placeholder="Street address (required)" formControlName="street">

                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-1 col-form-label header" attr.for="{{'line2Id' + i}}">Line
                                        2</label>
                                    <div class="col-md-9">
                                        <input class="form-control" id="{{'line2Id' + i}}" type="text"
                                            placeholder="Street address (second line)" formControlName="line2">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-1 col-form-label header" attr.for="{{'line3Id' + i}}">Line
                                        3</label>
                                    <div class="col-md-9">
                                        <input class="form-control" id="{{'line3Id' + i}}" type="text"
                                            placeholder="Street address (third line)" formControlName="line3">
                                    </div>
                                </div>

                                <div class="form-group row ">
                                    <label class="col-md-1 col-form-label header" attr.for="{{'cityId' + i}}">City, Zip
                                        Code</label>
                                    <!-- <div *ngIf="!EditMode && FirmDetails.People">{{FirmDetails.Addresses}}</div> -->
                                    <div class="col-md-3">
                                        <kendo-dropdownlist style="width:100%" [data]="cities" [defaultItem]=""
                                            [valuePrimitive]="true" formControlName="city" [defaultItem]=""
                                            [filterable]="true" textField="Name" valueField="Id"></kendo-dropdownlist>
                                    </div>

                                    <div class="col-md-2">
                                        <input class="form-control" id="{{'zipCodeId' + i}}" type="number"
                                            placeholder="Zip Code" formControlName="zipCode">
                                    </div>
                                </div>

                                <div class="form-group row">
                                        <label class="col-md-1 col-form-label header" attr.for="{{'phoneId' + i}}">Line
                                            3</label>
                                        <div class="col-md-9">
                                            <input class="form-control" id="{{'phoneId' + i}}" type="text"
                                                placeholder="Phone" formControlName="phone">
                                        </div>
                                    </div>

                            </div>
                        </div>
                        <div *ngIf="EditMode">
                            <button (click)="addAddress()">Add Address</button>
                        </div>
                    </div>
                </div>


                <div class="form-group row">
                    <div class="col-md-12" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
                        <div class="desc-header">Firm History</div>
                        <div class="divEditor">
                            <ckeditor [editor]="Editor" [id]="'ckFirmHistory'" *ngIf="EditMode"
                                formControlName="firmHistory" style="font-size: 11px;" debounce="500"
                                [config]="EditorConfig">
                            </ckeditor>
                            <div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FirmDetails.Firm.HISTORY_HTML">
                            </div>
                        </div>
                    </div>
                </div>



            </div>
            <div class="btn-toolbar" style="padding-top:40px;">
                <span> <button class="btn btn-default btn mr-3">
                        <i class="fa fa-file-pdf-o"></i>
                        Download Template
                    </button>
                </span>
                <span> <button class="btn btn-default btn mr-3">
                        <i class="fa fa-th-large"></i>
                        Upload Template Data
                    </button>
                </span>
                <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>
        </form>
    </div>
</div>