Comment gérer la largeur du champ de saisie dans Bootstrap 3 ?

Gestion de la largeur d'entrée dans Bootstrap 3

Bootstrap 3 fournit des options robustes pour contrôler la largeur des champs de saisie. Contrairement à l'idée selon laquelle des systèmes de grille doivent être utilisés, il existe effectivement des fonctionnalités intégrées pour y parvenir.

L'étape cruciale consiste à envelopper chaque groupe d'entrée, plutôt que le formulaire entier, dans sa propre ligne. Cette approche garantit que les contrôles d'entrée restent indépendants et évitent les problèmes de mise en page.

Exemple d'utilisation :

<code class="html"><div class="container">
    <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>

Dans ce code mis à jour, chaque groupe est enveloppé dans son propre rangée, permettant aux champs de saisie d'être étroits tout en conservant la structure de mise en page.

Il est important de noter que le comportement de bloc par défaut s'appliquera si la largeur de l'écran est inférieure à la largeur de l'écran. Taille de la requête multimédia LG (1200px par défaut). Pour spécifier différentes largeurs pour des tailles d'écran plus petites, des classes de colonnes appropriées peuvent être ajoutées aux éléments de ligne.

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!