css - div - tooltip html bootstrap
bootstrap: alinear la entrada con el botón (10)
¿Por qué los botones y las entradas no se alinean bien en bootstrap? Intenté algo simple como:
<input type="text"/><button class="btn">button</button>
El botón es aproximadamente 5px más bajo que la entrada en chrome / firefox.
Twitter Bootstrap 3
Como se muestra en la respuesta de @abimelex, las entradas y los botones se pueden alinear utilizando las .input-group (consulte http://getbootstrap.com/components/#input-groups-buttons ):
Botón de grupo en el lado izquierdo.
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
Botón de grupo en el lado derecho.
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Esta solución se ha agregado para mantener mi respuesta actualizada, pero por favor mantenga su voto actualizado en la respuesta proporcionada por @abimelex .
Twitter Bootstrap 2
Bootstrap ofrece una clase .input-append , que funciona como un elemento de envoltura y lo corrige por ti:
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Como lo señaló @OleksiyKhilkevich en su respuesta, hay una segunda forma de alinear la input y el button utilizando la clase .form-horizontal :
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Las diferencias
La diferencia entre estas dos clases es que .input-append colocará el button contra el elemento de input (para que parezca que está conectado), donde .form-horizontal colocará un espacio entre ellas.
-- Nota --
Para permitir que los elementos de input y button estén uno junto al otro sin espacio, el font-size se ha establecido en 0 en la clase .input-append (esto elimina el espacio en blanco entre los elementos del inline-block ). Esto puede tener un efecto adverso en los tamaños de fuente en el elemento de input si desea anular los valores predeterminados utilizando em o % mediciones.
Lo intenté por encima de todo y terminé con algunos cambios que me gustaría compartir. Aquí está el código que me funciona (encuentre la captura de pantalla adjunta):
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text">
<span class="input-group-btn" style="width:0;">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Si desea verlo funcionar, simplemente use el código a continuación en su editor:
<html>
<head>
<link type=''text/css'' rel=''stylesheet'' href=''https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'' />
</head>
<body>
<div class="container body-content">
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text">
<span class="input-group-btn" style="width:0;">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</body>
</html>
Espero que esto ayude.
No está directamente relacionado, a menos que tenga un código similar, pero acabo de notar un comportamiento extraño en form-inline, bootstrap 3.3.7
No usé filas y celdas para esto, ya que es un proyecto de escritorio, si la etiqueta de apertura estaba debajo de la tabla (en este caso):
<table class="form-inline">
<form>
<tr>
Los elementos de forma se apilarían.
Interruptor y correctamente alineado.
<form>
<table class="form-inline">
<tr>
Safari 10.0.2 y el último Chrome no hicieron ninguna diferencia. Tal vez mi diseño estaba mal, pero no es muy indulgente.
Probé todos los códigos anteriores y ninguno de ellos solucionó mis problemas. Esto es lo que funcionó para mí. Utilicé input-group-addon.
<div class = "input-group">
<span class = "input-group-addon">Go</span>
<input type = "text" class = "form-control" placeholder="you are the man!">
</div>
Solo las cabezas arriba, parece que hay una clase especial de CSS para esta form-horizontal llamada form-horizontal
input-append tiene otro efecto secundario, que reduce el tamaño de la fuente a cero
Use .form-inline = Esto alineará a la izquierda las etiquetas y los controles de bloque en línea para un diseño compacto
Ejemplo: http://jsfiddle.net/hSuy4/292/
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = alinear a la derecha las etiquetas y flotarlas hacia la izquierda para hacer que aparezcan en la misma línea que los controles, lo que es mejor para el diseño de formulario de 2 columnas.
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Ejemplos: http://twitter.github.io/bootstrap/base-css.html#forms
Yo también estaba luchando con el mismo problema. Las clases de bootstrap que utilizo no funcionan para mí. Se me ocurrió una solución, como a continuación:
<form action=''...'' method=''POST'' class=''form-group''>
<div class="form-horizontal">
<input type="text" name="..."
class="form-control"
placeholder="Search People..."
style="width:280px;max-width:280px;display:inline-block"/>
<button type="submit"
class="btn btn-primary"
style="margin-left:-8px;margin-top:-2px;min-height:36px;">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
Básicamente, anulé la propiedad de visualización de la clase "control de formulario" y usé otras propiedades de estilo para corregir el tamaño y la posición.
El siguiente es el resultado:
puede utilizar la propiedad del botón de grupo de entrada para aplicar el botón directamente al campo de entrada.
Bootstrap 3 y 4
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
Echa un vistazo a BS4 Input-Group doc para muchos más ejemplos.
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
style="padding-top: 8px"
Use esto para cambiar su div hacia arriba o hacia abajo en su fila. Obras maravillas para mi.