Bootstrap将输入框并排放置

Question

使用收音机底部，提交和输入框。目标是让它看起来像这样：

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

Answer 1

取消float:left;上的.form-horizontal。

然后将每个人.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/

我希望稍微清理一下。