DotVVM - 多选内容被输入覆盖

Question

我有DotVVM多选样式的问题。多选的内容被输入覆盖，我不知道是什么原因造成这个问题。当我使用完全相同的css类的dropdown list时，这没有任何问题。你可以看到下面

在这里，在图片下拉列表结构是我的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> 

CSS代码

.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; 
} 

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

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

Answer 1

这是一个引导兼容性问题。 form-group与MultiSelect不集中，因此比其他组低z-index。