Twitter Bootstrap Forme horizontale

Question

J'essaye de créer un formulaire en utilisant Bootstrap où les champs sont horizontaux mais les étiquettes sont au-dessus du champ. Le code HTML que j'ai est

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

Ce produit une forme qui ressemble à

Mais ce que je veux quelque chose qui ressemble à

Qu'est-ce que Twitter Bootstrap magique ai-je besoin pour ça?

Answer 1

On dirait que j'ai réussi à résoudre mon propre problème. Html a été remplacé par

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