E-Mail und Passwort Formular in einer Zeile mit Bootstrap

Question

Ich habe vor kurzem Bootstrap gestartet. Ich möchte E-Mail/Passwort-Validierung in einer Reihe auf meiner Rails-Anwendung erstellen:

email? | password? | OK

Gerade jetzt, ich habe einen Code arbeitet für nur eine E-Mail und OK-Taste in einer Zeile:

email? | OK

<div class="col-lg-12 text-center v-center"> 
... 
    <form class="col-lg-12"> 
    <div class="input-group input-group-lg col-sm-offset-4 col-sm-4"> 
     <input type="text" class="center-block form-control input-lg" title="Enter your email." placeholder="email?"> 
     <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span> 
    </div> 
    </form> 
</div> 

und

.v-center { 
    margin-top:7%; 
} 

habe ich versucht, auf dem Code ein Passwort Hinzufügen oben:

... 
    <div class="input-group input-group-lg col-sm-offset-4 col-sm-4"> 
     <input type="text" class="center-block form-control input-lg" title="Enter your email." placeholder="email"> 
     <input type="text" class="center-block form-control input-lg" title="Enter your password." placeholder="password"> 
     <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span> 
... 

Aber es endete wie folgt aussehen:

email? 
      | OK 
password? 

Was fehlt?

Answer 1

Es sieht aus wie Bootstrap .center-block hat display: block; drin. Wenn Elemente nebeneinander angezeigt werden sollen, benötigen sie in der Regel eine displayinline oder inline-block in der CSS (es gibt ein paar andere Möglichkeiten, aber beide sind wohl die gängigsten/einfachsten).

Answer 2

Hier ist der Code dafür: Der Trick ist, "Form-inline" Klasse in dem Formular-Tag verwenden

<form class="form-inline"> 
    <div class="form-group"> 
    <label for="exampleInputName2">Name</label> 
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
    </div> 
    <div class="form-group"> 
    <label for="exampleInputEmail2">Email</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> 
    </div> 
    <button type="submit" class="btn btn-default">Send invitation</button> 
</form>