Utilizzo di un gruppo di input all'interno di un modulo in linea

Question

Quando si aggiunge uno input-group a form-inline, lo input-group viene visualizzato sotto il modulo su una "nuova riga" anziché in linea con gli altri controlli.

Sembra che questo è perché la classe input-group involucro ha display insieme ai table mentre gli altri ingressi, che funzionano bene, hanno la loro display set di inline-block. Ovviamente, non è possibile fornire lo schermo inline-blockinline-block perché il suo intervallo figlio add-on, che ha display: table-cell, richiede che la proprietà del genitore si allinei correttamente.

Quindi la mia domanda è: è possibile utilizzare input-group all'interno di una forma in linea utilizzando esclusivamente classi bootstrap? In caso contrario, quale sarebbe il miglior work-around consentendo l'uso di classi personalizzate.

Questo è un demo che illustra il mio punto. Il codice è il seguente:

<form action="" class="form-inline"> 
    <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> 
    <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/> 

    <div class="checkbox"> 
     <label> 
      <input type="checkbox" /> and Checkboxes 
     </label> 
    </div> 
    <select class="form-control" style="width: 150px;"> 
     <option>and Selects</option> 
    </select> 

    <button type="submit" class="btn btn-default">and Buttons</button> 
    <div class="input-group" style="width: 220px;"> 
     <span class="input-group-addon">BUT</span> 
     <input type="text" class="form-control" placeholder="not with input-groups" /> 
    </div> 
</form> 

Answer 1

Questo era effettivamente un bug ed è stato risolto (controllare lo issue on github per ulteriori informazioni).

Da ora in poi i moduli in linea in BootStrap richiedono di includere i controlli del modulo figlio con .form-group.

Quindi il mio codice diventerebbe:

<form action="" class="form-inline"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> 
    </div> 

    ... 
    <div class="form-group"> 
     <div class="input-group" style="width: 220px;"> 
      <span class="input-group-addon">BUT</span> 
      <input type="text" class="form-control" placeholder="not with input-groups" /> 
     </div> 
    </div> 
</form> 

Answer 2

Penso che potrebbe essere necessario separare il modulo in colonne per ottenere il layout in linea che si desidera. Un esempio (penso a quello che cerchi) è sul sito Bootstrap here.

provare a mettere

<div class="col-lg-1"></div> 

intorno i controlli per vedere che cosa voglio dire. Ovviamente devi lavorare su colonne di 12, quindi sarà necessario modificarlo di conseguenza.