Etiqueta en el lado izquierdo en lugar de encima de un campo de entrada

Me gustaría tener las etiquetas no encima del campo de entrada, sino en el lado izquierdo.

<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>

Este código me da:

Me gustaría tener:

Puede usar la clase de formulario en línea para cada grupo de formulario :)

<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>

Pon el <label>exterior del 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 documentación de Bootstrap 3 habla de esto en la pestaña de documentación CSS en la sección etiquetada "Requiere anchos personalizados", que dice:

Las entradas, selecciones y áreas de texto son 100% anchas por defecto en Bootstrap. Para usar el formulario en línea, deberá establecer un ancho en los controles de formulario que se usan dentro.

Si usa su navegador y las herramientas de Firebug o Chrome para suprimir o reducir el estilo de "ancho", debería ver las cosas alineadas de la manera que desea. Claramente, puede crear el CSS adecuado para solucionar el problema.

Sin embargo, me parece extraño que tenga que hacer esto. No pude evitar sentir que esta manipulación era molesta y, a largo plazo, propensa a errores. En última instancia, utilicé una clase ficticia y algo de JS para ajustar globalmente todas mis entradas en línea. Era un número reducido de casos, por lo que no era motivo de gran preocupación.

No obstante, a mí también me encantaría saber de alguien que tenga la solución "correcta" y pueda eliminar mi cuña / truco.

Espero que esto te ayude y te apoye por no arruinar a todas las personas que ignoraron tu solicitud como una preocupación de Bootstrap 3.

Puede crear dicho formulario donde la etiqueta y el control del formulario están al lado usando dos métodos:

1. Diseño de formulario integrado

<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. Diseño de forma horizontal

<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>

Puede consultar esta página para obtener más información y una demostración en vivo: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Me gusta esto

MANIFESTACIÓN

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>

Tuve el mismo problema, aquí está mi solución:

<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="[email protected]"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

aquí está la demostración

Debes flotar a la izquierda todos los elementos así:

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

dar algo de margen a los elementos deseados:

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

y establezca la etiqueta con la misma altura de línea que la altura de los campos:

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

Puede ver en las respuestas existentes que la terminología de Bootstrap es confusa. Si observa la documentación de bootstrap, verá que la clase formulario-horizontal es en realidad para un formulario con campos uno debajo del otro, es decir, lo que la mayoría de la gente pensaría como un formulario vertical. La clase correcta para un formulario que atraviesa la página es formulario en línea . Probablemente introdujeron el término en línea porque ya habían utilizado incorrectamente el término horizontal .

¡Puede ver en algunas de las respuestas aquí que algunas personas están usando estas dos clases en una forma! Otros piensan que necesitan una forma horizontal cuando en realidad quieren una forma en línea .

Sugiero hacerlo exactamente como se describe en la documentación de 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>

Que produce:

Puede usar una etiqueta de tramo dentro de la etiqueta

  <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>

Me las arreglé para solucionar mi problema con. Parece funcionar bien y significa que no tengo que agregar anchos a todas mis entradas manualmente.

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

Estoy seguro de que ya habría encontrado su respuesta ... aquí está la solución que obtuve.

Ese es mi 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;
  }

Y mi 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>

Puede ver el ejemplo de trabajo aquí ... http://jsfiddle.net/s6Ujm/

PD: Yo también soy un principiante, diseñadores profesionales ... siéntete libre de compartir tus comentarios.

Creo que esto es lo que quiere, de la documentación de bootstrap "Forma horizontal Use las clases de cuadrícula predefinidas de Bootstrap para alinear etiquetas y grupos de controles de formulario en un diseño horizontal agregando .form-horizontal al formulario. Al hacerlo, cambia .form-groups a se comportan como filas de cuadrícula, por lo que no es necesario .row ". Entonces:

<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>

Violín: 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>

También podemos usarlo simplemente como

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

Parece que agregar style="width:inherit;"a las entradas funciona bien. demostración de jsfiddle

No se requiere CSS. Esto debería verse bien en su página. Puede configurar col-md-*según sus necesidades

<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>