Comment gérer les largeurs d’entrée dans Bootstrap 3 ?

Gérer les largeurs d'entrée avec Bootstrap 3

Bootstrap 3 fournit un cadre complet pour créer des pages Web réactives et visuellement attrayantes. Cependant, lorsqu'il s'agit de gérer les largeurs de saisie, il peut y avoir une certaine confusion quant à la meilleure approche.

Fonctionnalité intégrée ou CSS personnalisé ?

Certains développeurs ont tenté pour utiliser la classe .col-lg-x pour contrôler les largeurs d'entrée, mais cela a des limites. L'appliquer au div du conteneur peut entraîner des problèmes de mise en page et de flottement.

Le consensus est qu'il n'y a aucune fonctionnalité intégrée dans Bootstrap 3 qui puisse gérer directement les largeurs d'entrée sans recourir à la grille ou en ajoutant du CSS supplémentaire.

Solution recommandée : système de grille avec CSS personnalisé

Pour obtenir le résultat souhaité, il est recommandé d'utiliser la grille Bootstrap système en conjonction avec des classes CSS personnalisées.

Voici comment cela fonctionne :

• Enveloppez chaque groupe d'entrée dans une ligne à l'aide de la classe .row.
• Appliquez une classe CSS personnalisée, telle que .input-wide, à l'entrée qui doit avoir une largeur étendue.
• Utilisez des classes de grille Bootstrap telles que .col-lg-1 ou .col-xs-5 pour spécifier les largeurs souhaitées sur différentes tailles d'écran.

Exemple de code :

<code class="html"><div class="container">
    <form role="form">
        <div class="row">
            <div class="form-group input-wide col-lg-2">
                <label for="code">Name</label>
                <input type="text">
            </div>
        </div>

        <div class="row">
            <div class="form-group input-normal col-lg-3">
                <label for="email">Email</label>
                <input type="text">
            </div>
        </div>

        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div></code>

Avantages de cette approche :

• Il vous permet de définir facilement différentes largeurs pour les champs de saisie sur différentes tailles d'écran.
• Il maintient la réactivité du système de grille Bootstrap.
• Il fournit un système modulaire et solution réutilisable pour gérer les largeurs de saisie sur plusieurs pages.

En suivant ces directives, vous pouvez gérer efficacement les largeurs de saisie dans Bootstrap 3 et créer des formulaires Web conviviaux et visuellement attrayants.

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!