Html DotVVM-多选内容由输入覆盖

我对DotVVM multiselect样式有问题。multiselect的内容被输入覆盖，我不知道是什么导致了这个问题。当我使用使用完全相同的css类的

下拉列表时，这没有任何问题。您可以在下图中看到下拉列表结构

这是我的HTML结构

<div class="form-group">
    <Label>
        <dot:Literal Text="{{value: Article.Article_Sections}}" />
    </Label>
    <div class="input-group">
        <bp:MultiSelect DataSource="{value: ArticleSectionsList}"
                        SelectedValues="{value: SelectedArticleSections}"
                        ItemTextBinding="{{value: Name}}"
                        ItemKeyBinding="{{value: Id}}"
                        class="form-control " />
    </div>
</div>
<div class="form-group">
    <Label>
        <dot:Literal Text="{{value: DetailDTO.Name}}" />
    </Label>
    <div class="input-group" Validator.Value="{{value: DetailDTO.Name}}">
        <dot:TextBox class="form-control" Text="{{value: DetailDTO.Name}}" />

    </div>
</div>

图像被编辑后，我在以前的代码结构中将下拉列表更改为简单的文本输入，以使其更具可读性，问题仍然是一样的。

显示下拉列表组件的图像，工作正常

这是一个引导程序兼容性问题。带有
MultiSelect
的
表单组
不可聚焦，因此其
z-index
比其他组低。
您可以附加一个示例项目吗？我将尝试创建一些itOk示例，以便在您可以清楚看到的地方重新创建示例项目。我没有从我的项目中添加样式，因为我们使用的是AdminLTE模板。只需单击multiselect，您将看到这些输入是如何覆盖multiselect内容列表的，但对于dropdown，它是精细的。你可以在这里下载：所以现在没有解决方案，我必须找到解决办法。引导将
的
z-index
设置为
3
。您可以尝试对
.form group.bp state focused
执行相同的操作。
.form-group {
    position: relative;
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.dotvvm-bp-multi-select .bp-popup {
    display: none;
    padding: 5px 2px;
    position: fixed;
    overflow: hidden;
    border-collapse: collapse;
    border: 1px solid #808080;
    border-radius: 0;
    background-color: #fff;
    color: #1a1a1a;
    font-weight: normal;
    cursor: default;
    margin-top: 1px;
    z-index: 1001;
    text-align: left;
}
//here is css for opened state
.dotvvm-bp-multi-select .bp-popup.bp-state-opened {
    display: block;
    z-index: 1001;
}

.dotvvm-bp-multi-select .bp-popup.bp-has-list > ul {
    list-style: none;
    overflow-x: hidden;
    padding: 5px 2px;
    max-height: 250px;
    margin: 0;
}