Html 在内联表单中使用输入组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18189398/
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
Using input-group inside an inline form
提问by edsioufi
When appending an input-groupto a form-inline, the input-groupappears below the form on a "new line" instead of inline with the other controls.
将 an 附加input-group到 a 时form-inline， 会input-group出现在表单下方的“新行”上，而不是与其他控件内联。
It seems that this is because the input-groupwrapper class has displayset to tablewhereas the other inputs, which work fine, have their displayset to inline-block. Of course, it is not possible to give the input-groupthe inline-blockdisplay because its child add-onspan, which has display: table-cell, needs the property of the parent to align correctly.
似乎这是因为input-group包装器类已display设置为 ，table而其他工作正常的输入将其display设置为inline-block. 当然，这是不可能给予input-group的inline-block显示器，因为它的子add-on跨度，其中有display: table-cell，需要正确的父母的财产对齐。
So my question is:is it possible to use input-groupinside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
所以我的问题是：是否可以input-group在仅使用 Bootstrap 类的内联表单中使用？如果没有，那么允许使用自定义类的最佳解决方法是什么。
Here is a demoillustrating my point. The code is the following:
这是一个演示说明我的观点。代码如下：
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
回答by edsioufi
This was indeed a bug and was resolved (check the issue on githubfor more info).
这确实是一个错误并已解决（查看github 上的问题以获取更多信息）。
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
从现在开始，BootStrap 中的内联表单需要使用.form-group.
So my code would become:
所以我的代码会变成：
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
回答by Damon
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
我认为您可能需要将表单分成几列以获得所需的内联布局。一个例子（我想你以后）是在引导网站在这里。
try putting
尝试放置
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.
在你的控件周围看看我的意思。您当然需要在 12 列中工作，因此需要相应地进行调整。
