Bootstrap 3：同一行上的兩種表格

Question

我製作了兩種註冊表單。當我將下面的代碼添加到頁面時，第二個字段會自動下降到第一個字段的下面。我希望它能繼續下去。

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

這裏是什麼樣子在正常的HTML（currently），這是什麼我希望它看起來像一個例子。但在bootstrap它不斷採取新的行

Answer 1

引用在Bootstrap的網站inline form styling。

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

或者，您也可以use columns把表單元素並排：

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