1

次の例で、最初のドロップダウン メニューの一部が別のドロップダウン メニューによって非表示になるのはなぜですか。

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

1 に答える 1

3

2ndフォームに装着すればOKz-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/

于 2014-09-29T13:50:33.330 に答える