Question

为什么第一个下拉菜单的某些部分会被以下示例中的另一个下拉菜单隐藏：

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

Answer 1

如果您将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/

bootstrap-select下拉列表被另一个下拉列表隐藏

1 个答案: