twitter-bootstrap 文本输入中的 Twitter Bootstrap 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14141516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap dropdown inside of text input
提问by dr0zd
Hi I want to build form using Twitter Bootstrap with dropdown menu insideof text input. Like this ->
嗨，我想使用 Twitter Bootstrap 和文本输入内的下拉菜单构建表单。像这样->
I've managed only do it in this way
我只做到了这样
<div class="input-append">
<form method="get" action="/option" class="navbar-search" id="searchForm">
<input type="text" size="16" placeholder="Search string" name="query">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle searchMain" style="width: 150 px;"><span>Option 1</span> <b class="caret"></b></button>
<ul class="dropdown-menu" id="search-dropdown" style="left: 220px;">
<li><a href="#" id="option-1">Option 1</a></li>
<li><a href="#" id="option-2">Option 2</a></li>
<li><a href="#" id="option-3">Option 3</a></li>
</ul>
<button type="submit" class="btn btn-primary"><i class="icon-white icon-search"></i></button>
</form>
</div>
But in this case droptdown is outside of text input. Is it possible to put dropdown inside of text input using Twitter Bootstrap?
但在这种情况下，下拉菜单不在文本输入范围内。是否可以使用 Twitter Bootstrap 在文本输入中放置下拉菜单？
回答by joshb
Take a look at the Forms section of the bootstrap docs: http://twitter.github.com/bootstrap/base-css.html#forms
看看引导文档的表单部分：http: //twitter.github.com/bootstrap/base-css.html#forms
Your markup will look something like this:
您的标记将如下所示：
<div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
The key here is the input-appendclass.
这里的关键是input-append类。
