twitter-bootstrap Bootstrap 将输入框并排放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22832571/
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 put input box side by side
提问by user3185936
Working on radio bottoms, submit and input box. The goal is to make it look like this:
处理单选底部、提交和输入框。目标是让它看起来像这样：
This is how far I have came. Bootply:http://www.bootply.com/126965
这就是我已经走了多远。Bootply:http://www.bootply.com/126965
回答by Albzi
Get rid of float:left;on the .form-horizontal.
摆脱float:left;上.form-horizontal。
Then wrap each individual .form-groupin
然后包裹每一个人.form-group在
<div class='row'>
<div class='col-md-6'>
...
</div>
</div>
Bootply- It needs to be tweaked to get it exactly how you want it.
Bootply- 需要对其进行调整以使其完全符合您的要求。
Also sorry about the text indentation, bootply does a horrible job of it and i'm too lazy to fix.
也很抱歉文本缩进，bootply 做得很糟糕，我懒得修复。
回答by nwillems
You could checkout inline forms( as described here: http://getbootstrap.com/css/#forms-inline) or maybe as suggested form-groups and columns described here: MOVED TO FIDDLE
您可以结帐内联表单（如此处所述：http://getbootstrap.com/css/#forms-inline）或可能作为此处描述的建议表单组和列：MOVED TO FIDDLE
UPDATE: As suggested in comment - plus bonus
更新：正如评论中所建议的 - 加上奖金
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
</form>
As such the inline solution doesn't really provide a top notch solution - since it is in one row only.
因此，内联解决方案并没有真正提供一流的解决方案 - 因为它仅在一行中。
I made a fiddle for the other example: http://jsfiddle.net/pZCUy/2/
我为另一个例子做了一个小提琴：http: //jsfiddle.net/pZCUy/2/
I hope that clears up things a bit.
我希望能把事情弄清楚一点。
