Vue multiselect show始终位于Bootstrap输入组

Question

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

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

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

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

Answer 1

看起来原因是在定义这些样式的"got image: ami-71e9020b, create encrypted copy..." Aws::EC2::Errors::InvalidRequest: The storage for the ami is not available in the source region. 文件中，vue-multiselect.min.css只有z-index为1.单击multiselect下拉列表可以切换该活动类。

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

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

Answer 2

尝试

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