Comment contrôler la largeur de saisie dans les formulaires Bootstrap 3 ?

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

Bootstrap 3 offre une gamme limitée d'options pour contrôler la largeur des entrées de formulaire. Comme le suggère la question initiale, l'utilisation de .col-lg-x ne donne pas le résultat souhaité. En effet, .col-lg-x ne peut être appliqué qu'aux div de conteneur, ce qui entraîne des problèmes de mise en page.

Approche alternative

Pour obtenir la fonctionnalité souhaitée, envisagez d'encapsuler chaque groupe d'entrée dans sa propre ligne, plutôt que de regrouper l'intégralité du formulaire dans une seule ligne. Par exemple :

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

Dans cette approche, chaque groupe d'entrée est enveloppé dans un .row distinct, garantissant que les largeurs d'entrée restent cohérentes quelle que soit la taille de l'écran. De plus, en ajoutant .col-lg-5 au conteneur d'entrée, vous pouvez également contrôler la largeur de saisie sur des écrans plus petits.

Limitations

Il est important de noter que la question initiale visait une solution utilisant la fonctionnalité BS intégrée sans recourir aux grilles. Cependant, comme le démontre la solution, même les options intégrées nécessitent l'utilisation du réseau pour obtenir le comportement souhaité.

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!