多个 bootstrap-selects：z-index 问题

Question

我正在使用 bootstrap-select 插件 select。问题是第一个 select 显示的下拉列表位于切换第二个 select 的按钮后面。检查一下（最后的jsfiddle）：

这是HTML:

<div class="input-group">
    <input id="min-value-input" type="text" class="form-control">
    <div class="input-group-btn">
        <select class="select-time-unit">
            <option value="m" selected>minutes</option>
            <option value="h">hours</option>
            <option value="d">days</option>
            <option value="w">weeks</option>
        </select>
    </div>
</div>
<div class="input-group">
    <input id="max-value-input" type="text" class="form-control">
    <div class="input-group-btn">
        <select class="select-time-unit">
            <option value="m" selected>minutes</option>
            <option value="h">hours</option>
            <option value="d">days</option>
            <option value="w">weeks</option>
        </select>
    </div>
</div>

当然，我正在启用插件：

$(function() {
  $('.select-time-unit').selectpicker();
})

该插件生成一个 bootstrap 下拉菜单。我已经尝试为生成的 HTML 的 li 元素提高 z-index 属性，并为按钮本身降低它，但是 none这有效。

这里有一个jsfiddle，大家可以自己看看。

Answer 1

只需添加一个z-index到父<div class="input-group">

Answer 2

影响子元素不起作用，因为堆叠顺序只会与父元素一样高。您只需要在第一个 .input-group 的父元素上设置更高的 z-index 即可。 https://jsfiddle.net/3oc6baoh/1/

$(function() {
  $('.select-time-unit').selectpicker();
})

.input-group.first {
  z-index: 1000;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="input-group first">
  <input id="min-value-input" type="text" class="form-control">
  <div class="input-group-btn">
    <select class="select-time-unit">
      <option value="m" selected>minutes</option>
      <option value="h">hours</option>
      <option value="d">days</option>
      <option value="w">weeks</option>
    </select>
  </div>
</div>
<div class="input-group">
  <input id="max-value-input" type="text" class="form-control">
  <div class="input-group-btn">
    <select class="select-time-unit">
      <option value="m" selected>minutes</option>
      <option value="h">hours</option>
      <option value="d">days</option>
      <option value="w">weeks</option>
    </select>
  </div>
</div>

Answer 3

这似乎是插件中的错误，如 here 所述。

最干净的修复（以及对我有用的）似乎如下。

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

多个 bootstrap-selects：z-index 问题

Mutliple bootstrap-selects: z-index issue

css

jquery

select

z-index

twitter-bootstrap