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

Question

Tanto en Chrome como en Firefox:

• form-inline hace 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 usa form-horizontal .
• form-horizontal muestra form-horizontal perfectamente

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?

Answer 1

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>

Answer 2

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

Answer 3

Obtuve mis trabajos después de cambiar la radio or checkbox de radio or checkbox por radio-inline or checkbox-inline

http://jsfiddle.net/gn9Up/57/