引导，选择下拉得到另一个下拉隐藏

为什么第一个下拉菜单中的某些部分由下面的另一个下拉菜单，在下面的例子中得到隐藏：引导，选择下拉得到另一个下拉隐藏

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

来源

2014-09-29 user977828

你能解释一下什么是被隐藏？选择框在打开时叠加在下面的输入元素上是正常行为。 – 2014-09-30 07:32:30

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

来源

2014-09-29 13:50:33 Dmitry

引导，选择下拉得到另一个下拉隐藏

回答

相关问题