Bootstrap 模态框显示左右两列(两个table)

版权声明：本文为Martin原创文章，未经Martin允许不得转载。 https://blog.csdn.net/qq_36279445/article/details/82114161

效果图：

代码：

<form #handleExceptionForm=ngForm>
      <div class="modal-header">
        <p class="modal-title">Handle Exception</p>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div *ngIf="handleSuccessMsg != ''" class="handleSuccess">
        {{handleSuccessMsg}}
      </div>
      <div *ngIf="handleExceptionMsg != ''" class="handleError">
        {{handleExceptionMsg}}
      </div>
      <div class="modal-body row col-md-12">
            <div class="form-group" class="correctiveAction col-md-6">
                <label for="correctiveActionText">Corrective Action</label>
               <textarea class="form-control correctiveActionText" [(ngModel)]="model.correctiveActionText" name="correctiveActionText" id="correctiveActionText" readonly></textarea>
            </div>
            <div class="form-group" class="col-md-6">
                <label for="historyReviewList">Comments List</label>
                <div class='commentContainer'>
                    <table class="table">
                        <thead>
                            <tr>
                            <th>Date Time</th>
                            <th>Comments</th>
                            <th>Operator</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let option of historyReviewList; let i = index">
                                <td>{{option.createdDateTime | date:'MM/dd/yyyy hh:mm a'}}</td>
                                <td class="commentText">
                                    {{option.commentText}}
                                </td>
                                <td>{{option.operator}}</td>
                            </tr>
                            <tr style="text-align:center;" *ngIf="!historyReviewList || historyReviewList.length === 0">
                                <td colspan="4">No submission record found.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
      </div>
      <div class="modal-body row col-md-12">
          <div class="col-md-6">
            <div class="form-group">
                <label for="departmentCode">Department:</label>
                <select class="form-control" id="assignDepartments" required [(ngModel)]="model.departmentCode"  name="assignDepartments" #assignDepartments="ngModel">
                    <option *ngFor="let code of assigDepts" [value]="code.value">{{code.text}}</option>
                </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
                <label for="comments">New Comment:</label>
                <textarea type="text" class="form-control" id="comments" maxlength="1000" [(ngModel)]="model.CommentText" name="comments" #comments="ngModel"></textarea>
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" style="width:100px" (click)="c('No')">Close</button>
        <button type="button" class="btn btn-primary" style="width:100px" (click)="saveHandleException(c)" [disabled]="!handleExceptionForm.form.valid">Save</button>
      </div>
    </form>

代码对应的效果图是：

客户又改改改。。