Twitter Bootstrap Forma orizzontale

Question

Sto cercando di creare un modulo utilizzando Bootstrap in cui i campi sono orizzontali ma le etichette sono sopra il campo. Il codice HTML che ho è

<form class="form-inline"> 
    <fieldset class="span6"> 
     <legend>Personal Details</legend> 

     <label>Firstname</label><input class="span12" type="text"> 
     <label>Surname</label><input class="span12" type="text"> 

     <label for="PhoneNumber">Phone Number</label><input id="PhoneNumber" class="span6" type="text"> 
     <label for="MobilePhone">Mobile Phone</label><input id="MobilePhone" class="span6" type="text"> 

     <label>Email Address</label><input class="span12" type="text"> 

    </fieldset> 
    <fieldset class="span6"> 
     <legend>Address Details</legend> 
    </fieldset> 
</form> 

Questo produce una forma che assomiglia a

Ma quello che voglio è qualcosa che assomiglia

Che magia Twitter Bootstrap ho bisogno di questo?

Answer 1

Sembra che sia riuscito a risolvere il mio problema. Html modificato in

<form class="form-inline"> 
    <fieldset class="span6"> 
     <legend>Personal Details</legend> 

     <label>Firstname</label><input class="span12" type="text"> 

     <label>Surname</label><input class="span12" type="text"> 

     <div class="controls-row"> 
      <div class="control-group span6"> 
       <label for="PhoneNumber">Phone Number</label> 
       <input id="PhoneNumber" class="span12" type="text"> 
      </div> 
      <div class="control-group span6"> 
       <label for="MobilePhone">Mobile Phone</label> 
       <input id="MobilePhone" class="span12" type="text"> 
      </div>       
     </div> 

     <label>Email Address</label><input class="span12" type="text"> 

    </fieldset> 
    <fieldset class="span6"> 
     <legend>Address Details</legend> 
    </fieldset> 
</form>