引导程序表格未对齐，p-multiselect宽度太小，日历未正确对齐

Question

我在使用primeng的angular 2代码中使用引导程序。 Bootstrap版本是4。我想对齐数据，使第2行的值在第1行，而startDate的endDate在第2行，textarea在第3行。在angular.json中引用了BootStrap.min.js，并且inspect元素进入了js文件。 CSS文件也被正确引用。但是，无论我如何对齐，总是一团糟，并且不合适。我的带有下拉菜单的多选标签非常小，我什至看不到标签。有人可以帮忙找出这段代码有什么问题吗？输入框所附的日期字段不正确，因为它们之间的间隔很小。请参阅附件。 **

<form [formGroup]="testForm"  (ngSubmit)="submitForm(testForm.value)" >
            <div class="form-row">
            <div class="form-group row"  *ngIf="!this.isUserAdmin">
                    <label class="col-sm-2 col-form-label">Board:</label>
                    <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="boardname" value={{this.usersBoard}}>    
                    </div>
            </div>
            </div>
            <div class="form-row">
                <div class="form-group row"  *ngIf="this.isUserAdmin && board && board.length > 0" >
                        <label class="col-sm-2 col-form-label">Board Id:</label>    
                        <div class="col-sm-10">                                        
                        <p-multiSelect [options]="boards" formControlName="board" (onChange)="displayBoard($event)"></p-multiSelect>                                    
                        </div>         
                </div>
                <div class="form-group row"  *ngIf = "div1">
                        <label class="col-sm-2 col-form-label">Board:</label>
                        <div class="col-sm-10">
                                <input type="text" readonly class="form-control-plaintext" id="boardname" value={{this.userSelectedBoard}}>    
                        </div>
                </div>
                
            </div>
            <div class="form-row">
                <div class="form-group row"  >
                        <label class="col-sm-2 col-form-label">Start Date:</label>
                        <div class="col-sm-10">
                            <p-calendar formControlName="startDate" [showIcon]="true"></p-calendar>
                            <span style="margin-left:35px">{{startDate|date}}</span>
                        </div>
                </div>
                <div class="form-group row"   >
                    <label class="col-sm-2 col-form-label">End Date:</label>
                    <div class="col-sm-10">
                            <p-calendar formControlName="endDate" [showIcon]="true"></p-calendar>
                            <span style="margin-left:35px">{{endDate|date}}</span>
                        </div>
                </div>
            </div>
            <div class="form-row">
                    <div class="col-sm-9">
                      <textarea rows="5" cols="100" maxlength="500" formControlName="message" class="form-control"  pInputTextArea ></textarea>
                    </div>
            </div>
            <div class="form-row">
                    You have written {{ descriptionLength | async }} characters
                </div>
            <br>
            <div>
                    <label class="control-label col-sm-4">
                        <button type="submit" class="btn btn-primary" >    Submit  </button>
                    </label>
                </div>
            </form>

**