引导程序选择下拉列表被另一个下拉列表隐藏

bootstrap-select drop-down get hidden by another drop-down

本文关键字：下拉列表 隐藏 另一个 引导程序 选择      更新时间：2023-09-26

为什么第一个下拉菜单的某些部分被下面的另一个下拉菜单隐藏：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Note there is no responsive meta tag here -->
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
    <title>MarkerDB</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css>
    <!-- Custom styles for this template -->
    <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <form class="form-inline" action="/between/" method="get">
          <div class="input-group"> 
            <span class="input-group-addon">TestA</span>
              <select name="tests" class="selectpicker form-control" data-live-search="true" title="Plese select a test ...">
                    <option selected value="1">Test1</option>
                    <option selected value="2">Test2</option>
              </select>
              <span class="input-group-btn">
                <button class="btn btn-default" type="submit">Search!</button>
              </span>
          </div>
      </form>
      <hr>
      <form class="form-horizontal" action="/compare/" method="get" role="form">
        <div class="input-group"> 
          <span class="input-group-addon">TestB:</span>
            <select name='cultnames' class="selectpicker show-menu-arrow form-control" multiple data-max-options="2" data-live-search="true">
                <option value="Test3">Test3</option>         
                <option value="Test4">Test4</option>
            </select>
            <span class="input-group-btn">
              <button class="btn btn-default" type="submit">Search!</button>
            </span>
          </div>
      </form>
      <hr>
    <HR>
    </div> <!-- /container -->

      <!-- Bootstrap core JavaScript
      ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
    <script>
      $('.selectpicker').selectpicker();
    </script>  
  </body>
</html>

如果在第二个表单中将z-index:0放在input-group上，它可以正常工作。

  ...
 <form class="form-horizontal" action="/compare/" method="get" role="form">
        <div class="input-group" style="z-index:0;"> 
  ...

http://jsfiddle.net/kme2j8ma/

相关文章：