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

Question

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

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

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

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

Answer 1

看起来这是因为在定义这些样式的 vue-multiselect.min.css 文件中，.multiselect--active 的 z-index 仅为 1。单击多选下拉菜单会切换该活动类。

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

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

Answer 2

试试

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