将引导版本从 4.3.1 升级到 4.6.1 后，下拉列表被覆盖

问：

早些时候，我的 angular 项目中的引导版本是 ~4.3.1。当我将引导程序版本升级到 4.6.1 时，下拉列表无法正常工作。正如您在图像中看到的，它与下面的文本重叠，但在引导程序升级之前它工作正常。

HTML 文件

<rca-modal-layout (close)="bsModalRef.hide()" class="overflow-fix">
        <ng-container modal-title>Assign to</ng-container>
        <ng-container modal-body>
            <span class="case-text">Case Selected: {{ selectedCases?.length }}</span>
            <div class="rca-forms rca-custom-control custom-radio assign-self">
                <input
                    data-selector="radio-btn"
                    type="radio"
                    id="assignSelf"
                    name="assignRadio"
                    class="custom-control-input"
                    (click)="radioPressed(assignEnum.self)"
                    [(ngModel)]="selectedRadio"
                    [value]="assignEnum.self"
                    [disabled]="disableSelfAssignRadio"
                />
                <label class="custom-control-label" for="assignSelf">Assign to me </label>
            </div>

            <div class="rca-forms rca-custom-control custom-radio assign-others">
                <input
                    type="radio"
                    id="assignOthers"
                    name="assignRadio"
                    class="custom-control-input"
                    (click)="radioPressed(assignEnum.others)"
                    [(ngModel)]="selectedRadio"
                    [value]="assignEnum.others"
                    [checked]="selectedOtherUserName != null"
                    [disabled]="disableAssignOtherRadio"
                />
                <label class="custom-control-label" for="assignOthers">Assign to user</label>
                <rca-select
                    [data]="assigneeList"
                    (selectChanged)="onOtherUserValueChanges($event)"
                    [selectedValues]="selectedOtherUser"
                    [settings]="selectSettings"
                    placeholder="Select user"
                    data-selector="assignee-list-dropdown"
                >
                </rca-select>
            </div>

            <div class="rca-forms rca-custom-control custom-radio assign-others">
                <input
                    data-selector="radio-btn"
                    type="radio"
                    id="unassignMe"
                    name="unassignRadio"
                    class="custom-control-input"
                    (click)="radioPressed(assignEnum.unAssign)"
                    [(ngModel)]="selectedRadio"
                    [value]="assignEnum.unAssign"
                    [disabled]="disableUnAssignRadio"
                />
                <label class="custom-control-label" for="unassignMe"
                    >Un-assign (Case will not be assigned to any user)</label
                >
            </div>
        </ng-container>

        <ng-container modal-footer>
            <div class="float-right mr-2">
                <rca-button
                    class="mr-2"
                    data-selector="submit-btn"
                    [disabled]="selectedRadio === 0 || (selectedRadio === 2 && selectedOtherUserName === null)"
                    [label]="'Submit'"
                    [minWidth]="'75px'"
                    [isLoading]="submissionInProgress"
                    (click)="submitButtonClicked()"
                >
                </rca-button>
                <button data-selector="cancel-btn" class="btn btn-secondary pl-2 pr-2 mr-2" (click)="bsModalRef.hide()">
                    Cancel
                </button>
            </div>
        </ng-container>
    </rca-modal-layout>

CSS 文件

.case-text {
    display: block;
    color: $mid-grey-d40;
}

.assign-button {
    margin: 12px 0;
}

.custom-control-label {
    padding-top: 4px;
    font-size: 12px;
    line-height: 13px;
}

.assign-self {
    margin-top: 20px;
}

.assign-others {
    padding-top: 20px;
    display: flex;
    align-items: center;
}

.custom-radio {
    ::ng-deep {
        rca-select {
            margin-left: 12px;
            .dropdown-menu {
                width: 250px;
            }
            .form-control {
                width: 100px;
            }
            .search-group {
                height: 32px;
            }
            .dropdown-action-button {
                display: none;
            }
        }
    }
}

.overflow-fix {
    ::ng-deep .modal-body {
        overflow-x: initial !important;
        overflow-y: initial !important;
    }
}

.btn-secondary {
    width: 73px;
}

以“rca”开头的类和元素来自包含公共 UI 组件和类的外部公共存储库。

custom-control, .rca-custom-control {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 1.275rem;
    padding-left: 1.625rem;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}
dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.custom-control, .rca-custom-control {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 1.275rem;
    padding-left: 1.625rem;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}