css - 将 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://stackoverflow.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 插件应该已经为您生成了这个类，但如果没有，只需手动添加该类。示例:

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

结果

说明

bootstrap-select 插件具有以下 CCS 规则，可以实现这一点:

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