Forma normale (verticale) all'interno di form-orizzontale con Twitter Bootstrap

Question

Vorrei un modulo con un layout orizzontale al primo livello, ma poi all'interno di una riga ci può essere una forma "in linea" che voglio avere un layout verticale (predefinito). C'è un modo semplice per raggiungere questo obiettivo?

Nota:.form-inline non fa ciò che sto cercando, in quanto non inserisce le etichette interne sopra gli ingressi.

Finora ho qualcosa di simile:

<div class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label"> 
      outer label 
     </label> 
     <div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###"> 
      ### INLINE FORM WITH SAME STRUCTURE IS HERE ### 
     </div> 
    </div> 
</div> 

Answer 1

bootstarp non può farlo di default, ma ho incluso nel mio forchetta https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40

Si prega di considerare l'utilizzo di estensioni di Jasny per il Bootstrap http://jasny.github.com/bootstrap

o semplicemente usare questo CSS

.form-vertical .form-horizontal .control-group > label { 
    text-align: left; 
} 
.form-horizontal .form-vertical .control-group > label { 
    float: none; 
    padding-top: 0; 
    text-align: left; 
} 
.form-horizontal .form-vertical .controls { 
    margin-left: 0; 
} 
.form-horizontal .form-vertical.form-actions, 
.form-horizontal .form-vertical .form-actions { 
    padding-left: 20px; 
} 
.control-group .control-group { 
    margin-bottom: 0; 
} 

.210

Con il codice HTML

<form class="form-horizonal"> 
    # Horizal controls here 

    <div class="form-vertical"> 
     <div class="control-group"> 
      <label class="control-label">Label</label> 
      <div class="controls">Something here</div> 
     </div> 
    </div> 
</form> 

Answer 2

ero sicuro esattamente quello che stavi cercando, ma ho cercato di indovinare.

Ho creato una forma con due linee verticali la seconda con più elementi di forma.

Ho utilizzato il blocco inline per eseguire questa operazione.

http://jsbin.com/icoduh/1/edit

Answer 3

Ecco @ Jasny-arnold-Daniels CSS aggiornato per bootstarp 3. In 3 forma-gruppo sostituisce controllo-gruppo, forma di controllo sostituisce controllo. Ha anche bisogno di cambiare la larghezza in user9645. Nuovo CSS è:

.form-vertical .form-horizontal .form-group > label { 
    text-align: left; 
} 
.form-horizontal .form-vertical .form-group > label { 
    float: none; 
    padding-top: 0; 
    text-align: left; 
    width: 100% 
} 
.form-horizontal .form-vertical .form-control { 
    margin-left: 0; 
} 
.form-horizontal .form-vertical.form-actions, 
.form-horizontal .form-vertical .form-actions { 
    padding-left: 20px; 
} 
.form-group .form-group { 
    margin-bottom: 0; 
} 

Answer 4

Non è necessario scrivere CSS personalizzato per Bootstrap 3. Invece di mettere la vostra classe di forma orizzontale sul tag form, solo mettere un div involucro con quella classe intorno alla forma elementi che si desidera siano orizzontali (e che supportano le classi di dimensioni delle colonne per gli elementi orizzontali).

Ad esempio, questo dovrebbe funzionare:

<form> 
    <div class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-sm-2 control-label">I'm a horizontal form element</label> 
     <div class="col-sm-10"> 
     <input type="text" class="form-control"> 
     </div> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label>I'm a vertical form element</label> 
    <input type="text" class="form-control"> 
    </div> 
</form> 

Questo funziona perché la forma verticale viene usato automaticamente per un modulo con nessuna classe esplicitamente indicato. Questa 'mancanza di classe' può essere vista nei documenti here.