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


104

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:

Code_Result_Bootstrap_3_Label

Me gustaría tener:

Desired_Result_Bootstrap_3_Label

Respuestas:


85

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>

Gracias. Después de la etiqueta, tenía un grupo de entrada div que por defecto es ancho: 100%. Necesitaba anular ese div al 50%. Entonces la etiqueta y el grupo de entrada (selector de fecha) encajarían en una línea. (Sin embargo, desearía que estuviera más limpio sin anular)
Turbo

2
No, no es necesario que lo anule. Simplemente pruebe las opciones de cuadrícula, como 'fila' y 'col- *'.
gvgramazio

1
Esta debería ser la respuesta aceptada. Esto demuestra que se form-grouppuede heredar form-inlinepara hacer grupos de formularios individuales en línea en lugar de la clase principal del formulario.
cowbert

Nota: en mi caso, necesitaba poner INPUT en DIV
AlexNikonov

56

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>

curioso, esto funciona pero la documentación de bootstrap no muestra esto. Muestra la etiqueta en el grupo de formularios
steveareeno

14

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.


2
¿Qué tal, digamos, hacer el ancho de las etiquetas col-sm-2 - y las entradas col-sm-10?
niico

13

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


La solución 1 no me funciona. Etiqueta todavía por encima del control de entrada. La solución de candu hace lo que quiero, pero ¿es la forma correcta?
Kit Fisto

8

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>

4
Esta es la solución para Bootstrap v2.1.0, pero no para Bootstrap v3.0.0
Stefan Vogt

3
"form-inline" también existe en Bootstrap 3, y creo que esa es la clave: +1
Per Quested Aronsson

7

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="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

aquí está la demostración


5

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

5

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:

ingrese la descripción de la imagen aquí


7
Copiando y pegando su código, obtengo la etiqueta de nombre sobre la entrada de texto con Bootstrap 3.3.4.
Mike Covington

2

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>

1

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

No es así como se supone que debes usar bootstrap. Le sugiero que use clases creadas para sus necesidades en lugar de modificar las existentes.
gvgramazio

Sí, estoy de acuerdo, escribí esto cuando era nuevo en toda la escena de Bootstrap.
Tom C

1

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.


1

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/


6
Your fiddle 404'd
Mike Covington

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

2
class = "control-group" no existe en Boostrap V3
Stefan Vogt


0

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>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.