css - kichink - Etiqueta en el lado izquierdo en vez de un campo de entrada

meta title y meta descripcion

Question

Me gustaría tener las etiquetas no sobre el campo de entrada, pero 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:

Answer 1

Puede usar la clase form-inline 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>

Answer 2

Coloque la <label> fuera 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>

Answer 3

Creo que esto es lo que desea, desde la documentación de arranque "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, se cambian .form-groups a comportarse como filas de cuadrícula, por lo que no es necesario .row ". Asi que:

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

Answer 4

Debe flotar dejando todos los elementos de esta manera:

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

dar un cierto margen a los elementos deseados:

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

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

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

Answer 5

Estoy seguro de que ya habrías encontrado tu respuesta ... esta es la solución que obtuve en.

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>

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

Answer 6

La documentación de Bootstrap 3 habla sobre esto en la pestaña de documentación de CSS en la sección etiquetada "Requiere anchos personalizados", que dice:

Las entradas, selecciones y áreas de texto son 100% de ancho por defecto en Bootstrap. Para usar la forma en línea, deberá establecer un ancho en los controles de formulario utilizados 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 alinearse de la manera que desee. Claramente, puede crear el CSS adecuado para solucionar el problema.

Sin embargo, me parece extraño que necesite hacer esto en absoluto. No pude evitar sentir que esta manipulación era a la vez molesta y, a largo plazo, propensa a errores. En definitiva, utilicé una clase ficticia y algunas JS para calzar globalmente todas mis entradas en línea. Fue un número pequeño de casos, por lo que no es una gran preocupación.

Sin embargo, a mí también me encantaría saber de alguien que tiene la solución "correcta" y podría eliminar mi shim / hack.

Espero que esto ayude, y los apoyos por no soplar una junta a todas las personas que ignoraron su solicitud como una preocupación de Bootstrap 3.

Answer 7

Logré solucionar mi problema. Parece que funciona bien y significa que no tengo que agregar anchos a todas mis entradas manualmente.

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

Answer 8

Me gusta esto

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>

Answer 9

Parece agregar style="width:inherit;" a las entradas funciona bien. jsfiddle demo

Answer 10

Puede crear una forma en la que la etiqueta y el control de formulario sean secundarios utilizando dos métodos:

1. Diseño de formulario en línea

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

Answer 11

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

¡Algunas de las respuestas aquí muestran que algunas personas usan ambas clases en una sola forma! Otros piensan que necesitan forma horizontal cuando realmente quieren forma en línea .

Sugiero que lo haga 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:

Answer 12

Puedes usar una etiqueta span 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>

Answer 13

Tuve el mismo problema, esta es 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 Demo

Answer 14

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