twitter-bootstrap Bootstrap 3 选择输入表单内联
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19905166/
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
Bootstrap 3 select input form inline
提问by Collector
I'm trying to get input and select option inline attached with each other like this demo using Bootstrap 2 (dead link).
我正在尝试使用 Bootstrap 2 (dead link)获取输入并选择相互关联的选项，就像这个演示一样。
Following Bootstrap 3 guidelines I manage to do this:
遵循 Bootstrap 3 指南，我设法做到了这一点：
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="form-group col-sm-5">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
</div>
<div class="form-group col-sm-3">
<select class="form-control" name="category">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
It's responsive, but input and select can't be attached without some nasty css hacks. I found lot of examples with attached buttons, but that does not work with select element.
它是响应式的，但是如果没有一些讨厌的 css hacks，就无法附加输入和选择。我发现了很多带有附加按钮的示例，但这不适用于 select 元素。
回答by cinemazealot
I think I've accidentally found a solution. The only thing to do is inserting an empty <span class="input-group-addon"></span>between the <input>and the <select>.
我想我无意中找到了解决方案。唯一要做的就是<span class="input-group-addon"></span>在<input>和之间插入一个空格<select>。
Additionally you can make it "invisible" by reducing its width, horizontal padding and borders:
此外，您可以通过减少其宽度、水平填充和边框来使其“不可见”：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<span class="input-group-addon" title="* Price" id="priceLabel">Price</span>
<input type="number" id="searchbygenerals_priceFrom" name="searchbygenerals[priceFrom]" required="required" class="form-control" value="0">
<span class="input-group-addon">-</span>
<input type="number" id="searchbygenerals_priceTo" name="searchbygenerals[priceTo]" required="required" class="form-control" value="0">
<!-- insert this line -->
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
<select id="searchbygenerals_currency" name="searchbygenerals[currency]" class="form-control">
<option value="1">HUF</option>
<option value="2">EUR</option>
</select>
</div>Tested on Chrome and FireFox.
在 Chrome 和 FireFox 上测试。
回答by Daniel Bj?rn?dal
Can be done with pure Bootstrap code.
可以使用纯 Bootstrap 代码完成。
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="form-group">
<label for="id" class="col-md-2 control-label">ID</label>
<div class="input-group">
<span class="input-group-btn">
<select class="form-control" name="id" id="id">
<option value="">
</select>
</span>
<span class="input-group-btn">
<select class="form-control" name="nr" id="nr">
<option value="">
</select>
</span>
</div>
</div> 回答by Jesse C
Thanks to G_money and other suggestions for this excellent solution to input-text with inline dropdown... here's another great solution.
感谢 G_money 和其他对带有内联下拉菜单的输入文本的出色解决方案的建议......这是另一个很棒的解决方案。
<form class="form-inline" role="form" id="yourformID-form" action="" method="post">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-male"></i></span>
<div class="form-group">
<input size="50" maxlength="50" class="form-control" name="q" type="text">
</div>
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</div>
</form>
This works with Bootstrap 3: allowing input-text inline with a select dropdown. Here's what it looks like below...
这适用于 Bootstrap 3：允许带有选择下拉列表的输入文本内联。这是下面的样子......
回答by jwolinsky
It requires a minor CSS addition to make it work with Bootstrap 3:
它需要添加少量 CSS 才能与 Bootstrap 3 配合使用：
.input-group-btn:last-child > .form-control {
margin-left: -1px;
width: auto;
}<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="form-group">
<div class="input-group">
<input class="form-control" name="q" type="text" placeholder="Search">
<div class="input-group-btn">
<select class="form-control" name="category">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</div>回答by spacebean
I can't seem to make that work without hacks either, so what I did was just use the drop-down menu in place of a select box and send the info through a hidden field, like so (using your code):
我似乎也无法在没有黑客的情况下完成这项工作，所以我所做的只是使用下拉菜单代替选择框并通过隐藏字段发送信息，如下所示（使用您的代码）：
Jquery:
查询：
$('.dropdown-menu li').click(function(e){
e.preventDefault();
var selected = $(this).text();
$('.category').val(selected);
});
HTML:
HTML：
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="input-group col-sm-8">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<input type="hidden" name="category" class="category">
</div><!-- /btn-group -->
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
Not sure if that will work for what you want, but it is an option for you.
不确定这是否适用于您想要的，但它是您的一个选择。
回答by Aviral
Another different answer to an old question. However, I found a implementation made specifically for bootstrap which might prove useful here. Hope this helps anybody who is looking...
另一个旧问题的不同答案。但是，我发现了一个专门为 bootstrap 制作的实现，它可能在这里很有用。希望这可以帮助任何正在寻找...
回答by robamler
Based on spacebean's answer, this modification also changes the displayed text when the user selects a different item (just as a <select>would do):
根据 spacebean 的回答，此修改还会在用户选择不同项目时更改显示的文本（就像 a<select>一样）：
http://www.bootply.com/VxVlaebtnL
http://www.bootply.com/VxVlaebtnL
HTML:
HTML：
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="input-group col-sm-8">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="mydropdowndisplay">Choice 1</span> <span class="caret"></span></button>
<ul class="dropdown-menu" id="mydropdownmenu">
<li><a href="#">Choice 1</a></li>
<li><a href="#">Choice 2</a></li>
<li><a href="#">Choice 3</a></li>
</ul>
<input type="hidden" id="mydropwodninput" name="category">
</div><!-- /btn-group -->
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
Jquery:
查询：
$('#mydropdownmenu > li').click(function(e){
e.preventDefault();
var selected = $(this).text();
$('#mydropwodninput').val(selected);
$('#mydropdowndisplay').text(selected);
});
回答by rob.m
This is how I made it without extra css or jquery:
这就是我在没有额外 css 或 jquery 的情况下制作它的方法：
<div class="form-group">
<div class="input-group">
<label class="sr-only" for="extra3">Extra name 3</label>
<input type="text" id="extra3" class="form-control" placeholder="Extra name">
<span class="input-group-addon">
<label class="checkbox-inline">
Mandatory? <input type="checkbox" id="inlineCheckbox5" value="option1">
</label>
</span>
<span class="input-group-addon">
<label class="checkbox-inline">
Per person? <input type="checkbox" id="inlineCheckbox6" value="option2">
</label>
</span>
<span class="input-group-addon">
To be paid?
<select>
<option value="online">Online</option>
<option value="on spot">On Spot</option>
</select>
</span>
</div>
</div>
回答by methodmain
I know this is a bit old, but I had the same problem and my search brought me here. I wanted two select elements and a button all inline, which worked in 2 but not 3. I ended up wrapping the three elements in <form class="form-inline">...</form>. This actually worked perfectly for me.
我知道这有点旧，但我遇到了同样的问题，我的搜索把我带到了这里。我想要两个 select 元素和一个全部内联的按钮，它在 2 但不是 3 中有效。我最终将三个元素包装在<form class="form-inline">...</form>. 这实际上对我来说非常有效。
