Formare in linea all’interno di un modulo orizzontale nel bootstrap di Twitter?

Qual è il modo migliore per progettare un modulo che assomigli a questo (vedi link sotto) nel bootstrap di Twitter senza classi fatte in casa?

È ansible impostare una forma interna -inline all’interno di una forma-orizzontale come nell’esempio seguente:

screenshot dell'interfaccia utente

Non nidificare tag

, che non funzioneranno. Basta usare le classi Bootstrap.

Bootstrap 3

 
Metadata

Puoi ottenere questo comportamento in molti modi, questo è solo un esempio. Provalo su questo bootply

Bootstrap 2

 
Metadata

Nota che sto usando .form-inline per ottenere lo styling dei propper all’interno di un .controls .
Puoi testarlo su questo jsfiddle

Per esempio di bootstrap 3 sopra funziona ma è complicato, piuttosto che usare il form-group usare form-inline per i campi che si desidera in linea.

Per esempio:

 

/

Questo utilizza twitter bootstrap 3.x con una class css per far sì che le etichette si posizionino in cima agli input. Ecco un collegamento per violino , assicurati di espandere il pannello dei risultati abbastanza largo da vedere l’effetto.

HTML:

  

CSS:

 .myform input.form-control { display: block; /* allows labels to sit on input when inline */ margin-bottom: 15px; /* gives padding to bottom of inline inputs */ } 

So che questa è una vecchia risposta, ma qui è quello che faccio di solito:

CSS:

 .form-control-inline { width: auto; float:left; margin-right: 5px; } 

Quindi avvolgi i campi che desideri siano inline in un div e aggiungi .form-control-inline all’input, ad esempio:

HTML

  

per renderlo semplice, basta aggiungere una class="form-inline" prima dell’input.

esempio:

//add the class here...