twitter-bootstrap Bootstrap 3：同一行上的两个表单

Bootstrap 3: Two forms on the same line

提问by Aidan

I have made two forms for registering. When i add the code below to the page the second field automatically drops down below the first one. I would like it to go besides it.

我已经制作了两种注册表格。当我将下面的代码添加到页面时，第二个字段会自动下降到第一个下方。除了它，我还希望它去。

<h1>Register</h1>


<input type="text" class="form-control" placeholder="Forename" autofocus style="width:150px">
<input type="text" class="form-control" placeholder="Surname" autofocus style="width:150px">

here is an example of what it looks like in normal html (currently) and that is what i want it to look like. But in bootstrap it keeps taking new line

这是它在普通 html（当前）中的样子的示例，这就是我想要的样子。但是在引导程序中它不断采用新的线路

回答by cbeckner

Reference the inline form stylingon Bootstrap's site.

参考Bootstrap 网站上的内联表单样式。

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

Alternatively, you can also use columnsto put form elements next to one another:

或者，您也可以使用列将表单元素并排放置：

<div class="row">
  <div class="col-lg-2">
    <input type="text" class="form-control" placeholder=".col-lg-2">
  </div>
  <div class="col-lg-3">
    <input type="text" class="form-control" placeholder=".col-lg-3">
  </div>
  <div class="col-lg-4">
    <input type="text" class="form-control" placeholder=".col-lg-4">
  </div>
</div>