Largeurs d'entrée dans bootstrap 3

dans Bootstrap 3, la gestion des largeurs d'entrée peut être un défi. Bien que la documentation suggère d'utiliser la classe .Col-LG-X, cette solution a des limitations.

Issue d'origine:

La question d'origine provient de l'incapacité de définir des largeurs d'entrée en utilisant .COL-LG-X sans affecter la mise en page du conteneur. Cette classe ne peut être appliquée au conteneur lui-même, résultant en des problèmes de mise en page indésirables.

Solution:

Une solution pratique réside dans l'emballage de chaque groupe d'entrée dans sa propre ligne. Ce faisant, la classe .COL-LG-X peut être appliquée aux groupes individuels, en contrôlant leur largeur tout en maintenant la structure globale du formulaire.

Exemple de code:

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

        

            

                Name
                
            
        

        

            

                Email
                
            
        
        

            Submit
        
    

Remarque:

Pour obtenir un dimensionnement cohérent sur différentes tailles d'écran, la classe .Col-xs-5 peut être incluse pour des écrans plus petits. Le supprimer n'affectera pas la fonctionnalité globale.

Conclusion:

En emballant les groupes d'entrée dans les lignes individuelles et en utilisant la classe .COL-LG-X, les développeurs peuvent gérer efficacement les largeurs d'entrée dans Bootstrap 3 sans complexité aux systèmes GRID ou aux classes CSS personnalisées.