Question

我正在使用bootstrap-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();
})

该插件会生成一个引导下拉菜单。我已经尝试为生成的HTML的z-index元素增加li属性，并为按钮本身添加它，但这些都不起作用。

这是一个jsfiddle，你可以在那里看到。

Answer 1

只需向父z-index

添加<div class="input-group">即可

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

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

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

Mutliple bootstrap-chosen：z-index issue

3 个答案: