Bootstrap 将输入框并排放置

Question

在单选底部工作，提交和输入框。目标是让它看起来像这样：

这就是我已经走了多远。 Bootply:http://www.bootply.com/126965

Answer 1

在.form-horizontal 上删除float:left;。

然后将每个单独的.form-group 包装在

<div class='row'>
  <div class='col-md-6'>
    ...
  </div>
</div>

Bootply - 需要对其进行调整才能完全符合您的要求。

对于文本缩进也很抱歉，bootply 做得很糟糕，我懒得修复。

Answer 2

您可以签出内联表单（如此处所述：http://getbootstrap.com/css/#forms-inline）或者可能是此处所描述的建议表单组和列：移至小提琴

更新：正如评论中所建议的那样 - 加上奖金

<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>

因此，内联解决方案并不能真正提供一流的解决方案 - 因为它只是在一行中。

我为另一个例子做了一个小提琴：http://jsfiddle.net/pZCUy/2/

我希望这能澄清一些事情。