Twitter下拉式引导内联input
我试图显示一个文本input内嵌下拉button。 我不知道如何做到这一点。 这里是我尝试过的HTML（我把它放在一行中，没有结果）：
<div class="input-append"> <input type="text" placeholder="foo" class="input-mini"> <div class="btn-group"> <a id="amount_type" class="btn dropdown-toggle" data-toggle="dropdown" href="#">10<span class="caret"></span></a> <ul id="amount_type_options" class="dropdown-menu"> <li class="selected"><a href="#">10</a></li> <li><a href="#">100</a></li> <li><a href="#">1000</a></li> </ul> </div> </div> 这可能吗？
谢谢
当前状态：文档中的默认实现
目前在文档中有一个input+下拉组合的默认实现（search“button下拉列表”）。 我留下了原来的解决scheme的logging和那些谁不能使用解决scheme现在包含在文档中。
原始解决scheme
对的，这是可能的。 事实上，在Twitter Bootstrap文档中有一个例子（按照下拉button的链接和search“ 示例 ”）：
<div class="btn-group"> <a class="btn btn-primary" href="#"> <i class="icon-user icon-white"></i> User </a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="icon-trash"></i> Delete</a></li> <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div>
如果封闭在文本中，它可以看起来像这样（改变button上的文本，没有别的）：
编辑：
如果您正试图通过附加下拉菜单来实现<input> （如下拉button），那么这是解决scheme之一：
- 添加一个
btn-group类到有input-append类的元素， - 添加具有class
dropdown-toggle和dropdown-menu的元素，并在类的input-append元素input-append， - 覆盖元素匹配的风格
.input-append .btn.dropdown-menu所以它没有float: left（否则它将进入下一行）。
生成的代码可能如下所示：
<div class="input-append btn-group"> <input class="span2" id="appendedInputButton" size="16" type="text"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="icon-trash"></i> Delete</a></li> <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div>
从这个样式覆盖的一点支持：
.input-append .btn.dropdown-toggle { float: none; }
并给出与此完全相同的结果：
编辑2：更新了CSSselect器（是.dropdown-menu ，是.dropdown-toggle ）。
至于Bootstrap 3.x，这里的文档中有一个例子： http : //getbootstrap.com/components/#input-groups-buttons-dropdowns
<div class="input-group"> <input type="text" class="form-control" aria-label="..."> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group -->
这是我的解决scheme是使用显示：内联
Some text <div class="dropdown" style="display:inline"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </div> is here
一个
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />Your text <div class="dropdown" style="display: inline"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link</a> </li> </ul> </div>is here
这是带有inputsearch下拉的Bootstrap的代码。 我search了很多，然后我尝试在JavaScript和HTML引导，
HTML代码：
<div class="form-group"> <label class="col-xs-3 control-label">Language</label> <div class="col-xs-7"> <div class="dropdown"> <button id="mydef" class="btn dropdown-toggle" type="button" data-toggle="dropdown" onclick="doOn(this);"> <div class="col-xs-10"> <input type="text" id="search" placeholder="search" onkeyup="doOn(this);"></input> </div> <span class="glyphicon glyphicon-search"></span> </button> <ul id="def" class="dropdown-menu" style="display:none;" > <li><a id="HTML" onclick="mydef(this);" >HTML</a></li> <li><a id="CSS" onclick="mydef(this);" >CSS</a></li> <li><a id="JavaScript" onclick="mydef(this);" >JavaScript</a></li> </ul> <ul id="def1" class="dropdown-menu" style="display:none"></ul> </div> </div>
Javascript代码：
function doOn(obj) { if(obj.id=="mydef") { document.getElementById("def1").style.display="none"; document.getElementById("def").style.display="block"; } if(obj.id=="search") { document.getElementById("def").style.display="none"; document.getElementById("def1").innerHTML='<li><a id="Java" onclick="mydef(this);" >java</a></li><li><a id="oracle" onclick="mydef(this);" >Oracle</a></li>'; document.getElementById("def1").style.display="block"; } } function mydef(obj) { document.getElementById("search").value=obj.innerHTML; document.getElementById("def1").style.display="none"; document.getElementById("def").style.display="none"; }
您也可以根据您的要求使用jquery和json代码。
输出如： 
Daniel Farrell的Bootstrap Combobox完美地完成了这项工作。 这是他的GitHub仓库的一个例子。
$(document).ready(function(){ $('.combobox').combobox(); // bonus: add a placeholder $('.combobox').attr('placeholder', 'For example, start typing "Pennsylvania"'); });
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/css/bootstrap-combobox.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/js/bootstrap-combobox.min.js"></script> <select class="combobox form-control"> <option></option> <option value="PA">Pennsylvania</option> <option value="CT">Connecticut</option> <option value="NY">New York</option> <option value="MD">Maryland</option> <option value="VA">Virginia</option> </select>
search“数据列表标签”
<input list="texto_pronto" name="input_normal"><datalist id="texto_pronto"><option value="texto A"><option value="texto B"></datalist>
