Twitter Bootstrap - Formulaire Inline

Question

J'ai cette forme:

<!-- First Name--> 
    <div class="control-group"> 
     <label class="control-label">First Name</label> 
     <div class="controls"> 
     <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
     </div> 
    </div> 
    <!-- Last Name--> 
    <div class="control-group inline"> 
     <label class="control-label">Last Name</label> 
     <div class="controls"> 
     <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
     </div> 
    </div> 
    <!-- Telefonnumber--> 
    <div class="control-group"> 
     <label class="control-label">Telefonnumber</label> 
     <div class="controls"> 
     <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
     </div> 
    </div> 
    <!-- Street--> 
    <div class="control-group"> 
     <label class="control-label">Street</label> 
     <div class="controls"> 
     <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
     </div> 
    </div> 

Je veux afficher Nom Prénom à côté et dans ces deux champs de la Telefonnumber. Comment puis-je réaliser cela dans Twitter bootstrap?

BTW les jsfiddle

Answer 1

Bootstraps a quelques mises en page de formulaire exemple que vous pouvez use here.

Selon leur documentation, utilisez controls-row lorsque vous souhaitez plusieurs sur une ligne. (form-inline est pour la forme entière d'être en ligne). Vous voudrez lire leur scaffolding documentation avant d'aller de l'avant avec leurs classes.

Mis à jour jsfiddle

PS .. pointeurs HTML

1. Ne pas dupliquer id (et name si vous pouvez l'éviter). Par exemple, id="textinput" doit être unique sur l'ensemble de la page. Le name ne doit pas nécessairement être unique, mais il est préférable de simplement faire correspondre l'ID.
2. Ajoutez l'attribut for aux étiquettes.