Comment contrôler les largeurs d'entrée dans les formulaires Bootstrap 3 sans affecter la mise en page ?

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 présente des limites.

Problème d'origine :

La question d'origine découlait de l'incapacité de définir l'entrée largeurs en utilisant .col-lg-x sans affecter la disposition du conteneur. Cette classe ne peut être appliquée qu'au conteneur lui-même, ce qui entraîne des problèmes de mise en page indésirables.

Solution :

Une solution pratique consiste à envelopper 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 conservant la structure globale du formulaire.

Exemple de code :

<code class="html"><div class="container">
    <h1>My Form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control">
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal">
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div></code>

Remarque :

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

Conclusion :

En encapsulant les groupes d'entrée dans des lignes individuelles et en utilisant la classe .col-lg-x, les développeurs peuvent efficacement gérez les largeurs d'entrée dans Bootstrap 3 sans recourir à des systèmes de grille ou à des classes CSS personnalisées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!