javascript - Vue 多选显示始终在 Bootstrap 输入组后面

Question

我真的很难过。我正在使用 Vue Multiselect和 Bootstrap 的 3 个输入组。

这里的问题是，无论我在输入组上使用什么 z-index，多选选项都会显示在输入组后面。我知道我可以将输入组 z-index 更改为 0，但是在观察 Bootstrap SASS 文件时它说:“确保输入始终位于 appended 插件按钮上方以获得正确的边框颜色”所以我不这样做不知道这样做是否安全:

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

我尝试了多选上的每个选择器，但没有一个生效。任何帮助，将不胜感激。这是 fiddle :https://jsfiddle.net/cristiancastrodc/c9gdxg3s/

Answer 1

看起来这是因为在定义这些样式的 vue-multiselect.min.css 文件中，.multiselect--active 只有一个 z -index 为 1。单击多选下拉列表可切换该事件类。

将 .multiselect--active 上的 z-index 更改为大于 2(输入框的值)可能是解决此问题的最佳方法。

我已将此更新的解决方案放入新的 fiddle. 中