web-dev-qa-db-fra.com

Utilisation de input-group dans un formulaire en ligne

Lorsque vous ajoutez un input-group à un form-inline, les input-group apparaît sous le formulaire sur une "nouvelle ligne" au lieu d'être en ligne avec les autres contrôles.

Il semble que ce soit parce que le input-group la classe wrapper a display définie sur table tandis que les autres entrées, qui fonctionnent correctement, ont display définie sur inline-block. Bien sûr, il n'est pas possible de donner le input-group les inline-block s'affiche car son enfant add-on span, qui a display: table-cell, a besoin de la propriété du parent pour s'aligner correctement.

Donc ma question est: est-il possible d'utiliser input-group à l'intérieur d'un formulaire en ligne en utilisant Bootstrap classes exclusivement? Sinon, quelle serait la meilleure solution permettant l'utilisation de classes personnalisées.

Voici une démo illustrant mon propos. Le code est le suivant:

<form action="" class="form-inline">
    <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
    <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>

    <div class="checkbox">
        <label>
            <input type="checkbox" /> and Checkboxes
        </label>
    </div>
    <select class="form-control" style="width: 150px;">
        <option>and Selects</option>
    </select>

    <button type="submit" class="btn btn-default">and Buttons</button>
    <div class="input-group" style="width: 220px;">
        <span class="input-group-addon">BUT</span>
        <input type="text" class="form-control" placeholder="not with input-groups" />
    </div>
</form>
htmlcsstwitter-bootstraptwitter-bootstrap-3
25
edsioufi

C'était en effet un bug et a été résolu (consultez le problème sur github pour plus d'informations).

À partir de maintenant, les formulaires en ligne dans BootStrap nécessitent d'envelopper les contrôles de formulaire enfant avec .form-group.

Donc mon code deviendrait:

<form action="" class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
    </div>

    ...
    <div class="form-group">
        <div class="input-group" style="width: 220px;">
            <span class="input-group-addon">BUT</span>
            <input type="text" class="form-control" placeholder="not with input-groups" />
        </div>
    </div>
</form>
42
edsioufi

Je pense que vous devrez peut-être séparer votre formulaire en colonnes pour obtenir la mise en page en ligne que vous souhaitez. Un exemple (je pense à ce que vous recherchez) est sur le site Bootstrap ici .

essayez de mettre

<div class="col-lg-1"></div>

autour de vos commandes pour voir ce que je veux dire. Vous devez bien sûr travailler en colonnes de 12, donc cela devra être ajusté en conséquence.

1
Damon