anchos de entrada en bootstrap 3

en Bootstrap 3, la administración de anchos de entrada puede ser un desafío. Mientras que la documentación sugiere usar la clase .col-lg-x, esta solución tiene limitaciones.

emisión original:

La pregunta original se deriva de la incapacidad para establecer los ancho de entrada usando .Col-LG-X sin afectar el diseño del contenedor. Esta clase solo podría aplicarse al contenedor en sí, lo que resulta en problemas de diseño indeseables.

solución:

] una solución práctica se encuentra en el envoltor de cada grupo de entrada dentro de su propia fila. Al hacerlo, la clase .col-lg-x se puede aplicar a los grupos individuales, controlando su ancho mientras mantiene el ejemplo de la estructura de formulario general.

Ejemplo:

    
My Form
    
How to make these input fields small and retain the layout.
    

        

            

                Name
                
            
        

        

            

                Email
                
            
        
        

            Submit
        
    

nota:

para lograr un tamaño consistente en diferentes tamaños de pantalla, la clase .col-xs-5 se puede incluir para pantallas más pequeñas. Eliminarlo no afectará la funcionalidad general.

conclusión:

envolviendo grupos de entrada en filas individuales y utilizando la clase .col-lg-x, los desarrolladores pueden administrar efectivamente los anchos de entrada en Bootstrap 3 sin recurrir a los sistemas grid o las clases CSS personalizadas.