Bootstrap 3: Dwie postacie na tej samej linii

Question

Zrobiłem dwa formularze do rejestracji. Kiedy dodaję kod poniżej do strony, drugie pole automatycznie spada poniżej pierwszego. Chciałbym, żeby to poszło poza tym.

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

tutaj jest przykładem, jak to wygląda w normalnym formacie HTML (currently) i to, co ja chcę, żeby wyglądać. Ale w bootstrap Utrzymuje przy nowej linii

Answer 1

referencyjne inline form styling na miejscu za 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> 

Alternatywnie, można również use columns umieścić elementy formularza obok siebie:

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