Etichetta sul lato sinistro invece sopra un campo di input

Vorrei avere le etichette non sopra il campo di immissione, ma sul lato sinistro.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

Questo codice mi dà:

Vorrei avere:

Puoi usare la classe form-inline per ogni form-group :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

Metti l' <label>esterno form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

La documentazione di Bootstrap 3 parla di questo nella scheda della documentazione CSS nella sezione denominata "Richiede larghezze personalizzate", che afferma:

Gli input, le selezioni e le aree di testo sono larghe al 100% per impostazione predefinita in Bootstrap. Per utilizzare il modulo in linea, dovrai impostare una larghezza sui controlli del modulo utilizzati all'interno.

Se utilizzi il browser e gli strumenti Firebug o Chrome per sopprimere o ridurre lo stile di "larghezza", dovresti vedere le cose allineare come desideri. Chiaramente puoi quindi creare il CSS appropriato per risolvere il problema.

Tuttavia, trovo strano che abbia bisogno di farlo affatto. Non ho potuto fare a meno di sentire questa manipolazione sia fastidiosa che, a lungo termine, soggetta a errori. Alla fine, ho usato una classe fittizia e alcuni JS per shim a livello globale tutti i miei input in linea. Era un numero limitato di casi, quindi non era una grande preoccupazione.

Tuttavia, anch'io mi piacerebbe sentire qualcuno che ha la soluzione "giusta" e potrebbe eliminare il mio shim / hack.

Spero che questo ti sia di aiuto e ti aiuti a non soffiare una guarnizione a tutte le persone che hanno ignorato la tua richiesta come preoccupazione Bootstrap 3.

È possibile creare tale modulo in cui l'etichetta e il controllo del modulo sono laterali utilizzando due metodi:

1. Layout modulo in linea

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. Layout modulo orizzontale

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

Puoi controllare questa pagina per ulteriori informazioni e demo live - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Come questo

DEMO

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

Ho avuto lo stesso problema, ecco la mia soluzione:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

ecco la demo

Devi fluttuare a sinistra di tutti gli elementi in questo modo:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

dare un po 'di margine agli elementi desiderati:

 .form-group { margin-right:5px }

e imposta l'etichetta alla stessa altezza della riga dell'altezza dei campi:

.form-group label { line-height:--px; }

Puoi vedere dalle risposte esistenti che la terminologia di Bootstrap è confusa. Se guardi la documentazione del bootstrap, vedi che la classe form-horizontal è in realtà per un form con campi uno sotto l'altro, cioè ciò che la maggior parte delle persone considererebbe un form verticale. La classe corretta per un modulo che attraversa la pagina è form-inline . Probabilmente hanno introdotto il termine inline perché avevano già utilizzato in modo improprio il termine orizzontale .

Vedi da alcune delle risposte qui che alcune persone usano entrambe queste classi in una forma! Altri pensano di aver bisogno di form-horizontal quando in realtà vogliono form-inline .

Suggerisco di farlo esattamente come descritto nella documentazione di Bootstrap:

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

Che produce:

Puoi utilizzare un tag span all'interno dell'etichetta

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>

Sono riuscito a risolvere il mio problema con. Sembra funzionare bene e significa che non devo aggiungere manualmente le larghezze a tutti i miei input.

.form-inline .form-group input {
 width: auto; 
}

Sono sicuro che avresti già trovato la tua risposta ... ecco la soluzione che ho ricavato.

Questo è il mio CSS.

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

E il mio HTML ...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

Puoi vedere l'esempio di lavoro qui ... http://jsfiddle.net/s6Ujm/

PS: anch'io sono un principiante, designer professionisti ... sentitevi liberi di condividere le vostre recensioni.

Penso che questo sia quello che vuoi, dalla documentazione di bootstrap "Modulo orizzontale Usa le classi griglia predefinite di Bootstrap per allineare etichette e gruppi di controlli del modulo in un layout orizzontale aggiungendo .form-horizontal al modulo. In questo modo cambia .form-groups in si comportano come righe della griglia, quindi non c'è bisogno di .row ". Così:

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>
</form>

Fiddle: http://jsfiddle.net/beewayne/B9jj2/29/

<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

Inoltre possiamo usarlo semplicemente come

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

Sembra che l'aggiunta style="width:inherit;"agli input funzioni bene. jsfiddle demo

Nessun CSS richiesto. Dovrebbe apparire a posto sulla tua pagina. Puoi impostare col-md-*secondo le tue esigenze

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>