在Bootstrap中下拉搜索沒有得到重點

Question

我有一個簡單的Bootstrap菜單，其中包含一個下拉搜索框。這在桌面上顯示時可以正常工作，但是當菜單在移動設備上摺疊並且打開時，無法在搜索輸入字段中輸入文本。

這個問題的bootply版本，可以發現：http://www.bootply.com/62CEZI4zNe

我的代碼是：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default navbar-static-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false" aria-controls="navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse navbar-right" id="myNavbar"> 
 
     <ul class="nav navbar-nav pull-right"> 
 
     <li class="dropdown"> 
 
      <a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-search" style="color:#AAA;"></i></a> 
 
      <ul class="dropdown-menu" style="padding:12px;"> 
 
      <form class="form-inline"> 
 
       <button id="searchForVenues" type="submit" class="btn btn-default pull-right"><i class="glyphicon glyphicon-search"></i> 
 
       </button> 
 
       <input id="searchTerm" class="form-control pull-left" placeholder="Search" type="text"> 
 
      </form> 
 
      </ul> 
 
     </li> 
 
     <li><a href="/browser/saved/">Saved venues</a> 
 
     </li> 
 
     <li><a href="/browser/settings/">Settings</a> 
 
     </li> 
 
     <li><a href="/browser/about/">About</a> 
 
     </li> 
 
     <li><a href="/auth/login/">Sign In</a> 
 
     </li> 
 
     <li> 
 
      <a></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
</nav> 
 

 
<div class="container"> 
 

 
    <div class="text-center"> 
 
    <h1>Heading</h1> 
 
    <p class="lead">Some text.</p> 
 
    </div> 
 

 
</div>

任何人都可以指出我的錯誤，我需要做什麼當菜單在移動設備上摺疊時，允許輸入到搜索字段中？

Answer 1

您需要在下面的代碼行添加：

<div class="input-group"> 
     <button id="searchForVenues" type="submit" class="btn btn-default pull-right"> 
     <i class="glyphicon glyphicon-search"></i></button> 
     <input id="searchTerm" class="form-control pull-right" placeholder="Search" type="text"> 
    </div> 

你沒有輸入組中包含的一切。引導還表示，使用輸入組類時，以下幾點：

" Instead, nest the input group inside of the form group or grid-related element." 

基本上，你不想窩輸入組您當前使用的表單組的參數之外（這只是一個關於何時應該使用它的想法）。

最後，這裏是你的Bootply Code