将 bootstrap-select 与 input-group 和 form-control 类 一起使用时出现 z-index 问题

Question

我的代码

我正在使用 Bootstrap 3 和 bootstrap-select 插件。

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-user"></i>
        </span>
        <select class="form-control selectpicker">
            <option value="1" text="Test"></option>
            <option value="2" text="Test 2"></option>
            <option value="3" text="Test 3"></option>
        </select>
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="email" required class="form-control" placeholder="Email Adress"/>
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">https://whosebug.com/questions/</span>
        <input type="text" required="" class="form-control" placeholder="ID">
    </div>
</div>

结果

关闭时：

打开时：

可能的原因

bootstrap-select 插件生成以下 HTML:

<div class="dropdown bootstrap-select form-control open">...</div>

Bootstrap CCS 具有以下规则，将 .input-group 内的所有 form-control 同时对齐 z-index:

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

问题

我希望下拉列表中的项目出现在输入字段的前面，但它们呈现在后面（参见上面的屏幕截图）。浏览器：Chrome 71.

如何解决这个问题？

Answer 1

正确的HTML应该是

<div class="dropdown bootstrap-select input-group-btn form-control open">...</div>

bootstrap-select 插件应该已经为您生成了这个 class，但如果没有生成 - 只需手动附加 class。示例：

<select class="form-control input-group-btn selectpicker">

结果

说明

bootstrap-select 插件具有以下 CCS 规则，可以解决问题：

.bootstrap-select.form-control.input-group-btn {
    z-index: auto;
}