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

Question

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

3

我非常难以处理这个问题。我正在使用Vue Multiselect和Bootstrap的3个输入组。问题在于，无论我使用什么z-index，多选选项都会出现在输入组后面。我知道我可以将输入组的z-index更改为0，但是查看Bootstrap SASS文件时，它说：“确保输入始终位于附加的按钮上方，以获得正确的边框颜色”，所以我不知道这样做是否安全：

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

我试了multiselect上的每个选择器，但都没有生效。任何帮助将不胜感激。这是代码片段：https://jsfiddle.net/cristiancastrodc/c9gdxg3s/

- cristiancastrodc

2个回答

1

尝试

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

- Richard Matsen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- clk · Accepted Answer

看起来问题的原因是在定义这些样式的vue-multiselect.min.css文件中，.multiselect--active只有1的z-index。点击多选下拉框会切换该活动类。

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

我已经将这个更新的解决方案放在一个新的fiddle中。