twitter-bootstrap 如何在 Bootstrap 中制作输入附加下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16407797/
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
How to make input-appending drop-down list in Bootstrap
提问by Casey Patton
I have the following page:
我有以下页面：
Where my code for the form looks like:
我的表单代码如下所示：
<div class="container">
<div class="row">
<div class="offset3 span3">
<form class="form-horizontal" id="inputForm">
<div class="control-group">
<label class="control-label" for="volume">Beer Volume</label>
<div class="controls">
<div class="input-append">
<input type="text" id="volume" placeholder="i.e. 16">
<span class="add-on">oz</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="alcPercent">Alcohol</label>
<div class="controls">
<div class="input-append">
<input type="text" id="alcPercent" placeholder="i.e. 6.3">
<span class="add-on">%</span>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn-large" type="button" value="CONVERT" onclick="onSubmit()">CONVERT</button>
</div>
</div>
</form>
I'm trying to create the page so that "oz" is actually a drop-down menu, where the user can choose from "oz", "centiliters", "liters", etc. Is there a way to do this cleanly in Bootstrap? I see there's a "button dropdown": http://twitter.github.io/bootstrap/base-css.html#forms, but when I copied in that code, I couldn't get any of the dropdown choices working.
我正在尝试创建页面，以便“oz”实际上是一个下拉菜单，用户可以在其中选择“oz”、“厘升”、“升”等。有没有办法在引导程序？我看到有一个“按钮下拉菜单”：http: //twitter.github.io/bootstrap/base-css.html#forms，但是当我复制该代码时，我无法让任何下拉选项起作用。
How can I do this?
我怎样才能做到这一点？
回答by Christian K?nig
Same problem here. Hate to fix basics with js or something. Here is my fix :) :)
同样的问题在这里。讨厌用 js 或其他东西来修复基础知识。这是我的修复:) :)
<div class="form-group">
<label for="input" class="col-sm-2 control-label">Budget</label>
<div class="col-sm-10">
<div class="input-group">
<select class="form-control" style="float: left;width: initial;">
<option>€</option>
<option>$</option>
</select>
<input type="text" class="form-control" style="float: left;width: initial;">
<select class="form-control" style="float: left;width: initial;">
<option>per job</option>
<option>per hour</option>
</select>
</div>
</div>
</div>
回答by Zim
I would look into Bootstrap Select https://github.com/silviomoreto/bootstrap-select
我会研究 Bootstrap Select https://github.com/silviomoreto/bootstrap-select
With some CSS / jQuery customizing, it should work for you...
通过一些 CSS / jQuery 自定义，它应该适合你......
Working example on Bootply: http://bootply.com/60822
Bootply 上的工作示例：http: //bootply.com/60822
