css - internet - La etiqueta de casilla de verificación del formulario Bootstrap 3 no se alinea con la entrada de casilla de verificación en Chromium+Firefox
bootstrap js (3)
Tanto en Chrome como en Firefox:
-
form-inlinehace que la etiqueta se desplace hacia abajo y que el espacio entre la casilla de verificación y la etiqueta sea más estrecho que cuando se usaform-horizontal. -
form-horizontalmuestraform-horizontalperfectamente
Aquí hay una demostración en jsFiddle
Aquí hay un código:
<form class="form-inline">
<div class="checkbox">
<label>
<input type="checkbox"/> Test againn
</label>
</div>
</form>
Aquí hay una captura de pantalla:
¿Hay alguna forma de alinear correctamente las casillas de verificación en ambos navegadores o me falta algo?
En mi caso, ninguna de las respuestas resolvió el problema. Esto es lo que hice para alinear correctamente la entrada con la etiqueta. A han agregado 2px al margen superior. En bootstrap.css está configurado en 4px. Configurarlo a 6px "soluciona" el problema.
CSS
input[type=checkbox] {
margin: 6px 0 0;
}
HTML
<label class="checkbox-inline">
<input type="checkbox" value=""> Label text
</label>
Esto es realmente un problema en todos los navegadores (que he probado)
Aquí hay una captura de pantalla : agregué un borde gris para que sea más fácil decir que no está alineando .
Aquí hay una demostración que reproduce el problema
El problema ocurre cuando la forma en línea está en una pantalla que es más grande que 768px .
Particularmente, lo que daña la alineación es de esta línea de forms.less (que se introdujo con este compromiso ):
float: none;
Ingenuamente, volviendo a establecer este valor para float: left parece solucionar el problema, pero no estoy seguro de qué otros problemas pueden surgir.
@media (min-width: 768px) {
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-right: 5px;
}
}
Aquí hay una versión de trabajo de su código con estos cambios
Aparte de eso, solo tendrías que modificar el CSS
Obtuve mis trabajos después de cambiar la radio or checkbox de radio or checkbox por radio-inline or checkbox-inline