Modulo in linea all'interno di un modulo orizzontale in Twitter Bootstrap?

200

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

È possibile impostare una linea interna in linea all'interno di una forma orizzontale come nell'esempio seguente:

screenshot dell'obiettivo dell'interfaccia utente

html forms twitter-bootstrap

— Frntz
fonte

317

Non annidare i <form>tag, ciò non funzionerà. Usa solo le classi Bootstrap.

Bootstrap 3

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputType" class="col-md-2 control-label">Type</label>
      <div class="col-md-3">
          <input type="text" class="form-control" id="inputType" placeholder="Type">
      </div>
    </div>
    <div class="form-group">
        <span class="col-md-2 control-label">Metadata</span>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputKey" class="col-md-1 control-label">Key</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-1 control-label">Value</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </div>
</form>

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

Bootstrap 2

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputType">Type</label>
        <div class="controls">
            <input type="text" id="inputType" placeholder="Type">
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
</form>

Si noti che sto usando .form-inlineper ottenere lo stile propper all'interno di a .controls.
Puoi provarlo su questo jsfiddle

— albertedevigo
fonte

3

Puoi anche aggiungere le classi di modulo su div, nel mio caso ho usato la classe di forma verticale su un div span6 e una classe di forma orizzontale su un div

— span12

3

Questo funziona per bootstrap2. Per bootstrap 3 visita: stackoverflow.com/questions/18429121/...

— Tomislav Muic

1

In bootstrap 3, se è presente uno spazio sotto l'input, rimuovere "form-group". Aggiunge uno spazio di 15px nella parte inferiore di ogni div con cui lo usi.

— darkzangel,

Non è necessario mescolare il gruppo di moduli con la riga nell'esempio Chiave + Valore. @ rap-2-h: è possibile copiare incollare il codice di esempio e fare clic su Esegui.

— Sebastian,

Funziona, ma sono stato in grado di semplificarlo nella versione corrente di Bootstrap 3 ... Sembra fondamentale per questa soluzione solo per inserire qualsiasi controllo di input all'interno di un div, altrimenti il layout della griglia col-xx non funziona. Non è stato necessario nidificare il gruppo-modulo, il genitore col-xx- # può condividere lo stesso div e non è necessaria la classe "riga" poiché il modulo genitore è già un modulo orizzontale (100%).

— Tony Wall,

92

Per il bootstrap 3 l'esempio sopra funziona ma è troppo complicato, piuttosto che usare il form-group usa form-inline per i campi che vuoi inline.

Per esempio:

<div class="form-group">
     <label>CVV</label>
     <input type="text" size="4" class="form-control" />
</div>

<div class="form-inline">
      <label>Expiration (MM/YYYY)</label><br>
      <input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>

— Ryan Knell
fonte

Potrebbe non funzionare per te a causa della classe di controllo del modulo che imposta "display: block". Se lo sovrascrivi su "display: inline-block" dovrebbe funzionare.

— Cédric Guillemette,

1

Questo non funziona. Prova a fare ciò che la domanda pone, questo non è possibile con form-inline.

— Sebastian,

L'unico problema è che l'area secondaria non viene espansa alla massima larghezza e qualsiasi tentativo di utilizzare il dimensionamento della griglia verrà ridotto rispetto alla larghezza minima del contenuto richiesta. L'altra soluzione è migliore senza così tanti div (vedi il mio commento lì).

— Tony Wall,

3

Devi avvolgere tutti i gruppi di moduli in una classe in-line

— ymakux,

jsfiddle.net/9637fywb Questo sembra non funzionare come desiderato - usando l'attuale bootstrap CDN (3.3.5). Anche questo esempio non tiene conto di due etichette all'interno della sezione "inline". Forse al violino manca un involucro di qualche tipo, ma sembra che dovrebbe essere incluso nella risposta, in tal caso.

— Emragins

14

Questo utilizza twitter bootstrap 3.x con una classe css per ottenere le etichette da posizionare in cima agli input. Ecco un link violino , assicurati di espandere il pannello dei risultati in modo sufficientemente ampio da vedere l'effetto.

HTML:

  <div class="row myform">
     <div class="col-md-12">
        <form name="myform" role="form" novalidate>
           <div class="form-group">
              <label class="control-label" for="fullName">Address Line</label>
              <input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
           </div>

           <div class="form-inline">
              <div class="form-group">
                 <label>State</label>
                 <input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
              </div>

              <div class="form-group">
                 <label>ZIP</label>
                 <input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
              </div>
           </div>

           <div class="form-group">
              <label class="control-label" for="country">Country</label>
              <input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
           </div>
        </form>
     </div>
  </div>

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 */
}

— BatteryAcid
fonte

2

Poiché bootstrap 4 usa div class = "form-row" in combinazione con div class = "form-group col-X". X è la larghezza che ti serve. Otterrai delle belle colonne incorporate. Vedi violino .

<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2" for="naam">Naam:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
            <div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
        </div>
    </div>

    <div class="form-row">

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="telefoon">Telefoon:&nbsp;*</label>
            <div class="col-sm-12">
                <input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
                <div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
            </div>
        </div>

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="email">E-mail: </label>
            <div class="col-sm-12">
                <input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
                <div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
                    </div>
                </div>

        </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="titel">Titel:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
            <div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
        </div>
    </div>
<from>

— Henry
fonte

1

So che questa è una vecchia risposta, ma ecco cosa faccio di solito:

CSS:

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

Quindi avvolgere i campi che si desidera vengano allineati in un div e aggiungere .form-control-inline all'input, ad esempio:

HTML

<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>

— Jesus Gomez
fonte

1

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

esempio:

<div class="col-md-4 form-inline"> //add the class here...
     <label>Lot Size:</label>
     <input type="text" value="" name="" class="form-control" >
 </div>

— curiosità
fonte