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。