Vue 다중 선택이 항상 부트스트랩 입력 그룹 뒤에 표시됨

Vue 다중 선택이 항상 부트스트랩 입력 그룹 뒤에 표시됨

나 이거 진짜 힘들어.Vue Multiselect와 Bootstrap의 3가지 입력 그룹을 사용하고 있습니다.

여기서 문제는 입력 그룹에 어떤 z 인덱스를 사용하든 다중 선택 옵션이 입력 그룹 뒤에 표시된다는 것입니다.입력 그룹 z-index를 0으로 변경할 수 있다는 것은 알고 있지만 부트스트랩 SAS 파일을 보면 "적절한 테두리 색상에 대해 입력이 항상 추가된 추가 버튼 위에 있어야 합니다."라고 되어 있기 때문에 이렇게 해도 안전한지 모르겠습니다.

.input-group .form-control {
    z-index: 0;
}

모든 셀렉터를 멀티 셀렉트로 시도했지만 효과가 없습니다.어떤 도움이라도 주시면 감사하겠습니다.다음은 바이올린입니다.https://jsfiddle.net/cristiancastrodc/c9gdxg3s/

이 문제의 원인은 아마도 그 안에 있는 것 같습니다.vue-multiselect.min.css이 스타일링을 정의하는 파일,.multiselect--activez-index는 1뿐입니다.다중 선택 드롭다운을 클릭하면 해당 활성 클래스가 전환됩니다.

z 인덱스 변경.multiselect--active2보다 큰 값, 즉 입력 상자의 값이 이 문제를 해결하는 가장 좋은 방법이 될 수 있습니다.

나는 이 업데이트된 해결책을 새 바이올린에 넣었다.

해라

.input-group {
  z-index: -1;
}

언급URL : https://stackoverflow.com/questions/46374825/vue-multiselect-show-always-behind-bootstrap-input-groups