web-dev-qa-db-fra.com

Créer un formulaire en ligne avec bootstrap de groupes d'entrée

J'essaie de créer un simple formulaire en ligne en utilisant des groupes de saisie pour afficher les icônes avant les saisies. Autant que je sache, je suis la documentation, mais le formulaire ne s'affiche pas comme prévu. Voir ce JSFiddle , il montre le problème. J'ai supposé il devrait être affiché comme ceci (uniquement avec les icônes précédées bien sûr). Comment cela peut-il être résolu?

Mon code:

<form class="form-inline" role="form">
    <div class="form-group">    
        <div class="input-group">                       
            <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
            <input type="email" class="form-control" placeholder="Enter email"/>
        </div>
    </div>

    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
            <input type="password" class="form-control" placeholder="Choose password"/>
        </div>
    </div>                          

    <button type="submit" class="btn btn-default">Create account</button>
</form>
htmlcsstwitter-bootstrap-3
16
Ben

je l'ai fait fonctionner comme ceci:

<form class="form-inline" role="form">
<div class="row">
    <div class="form-group col-sm-3">
        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>

            <input type="email" class="form-control" placeholder="Enter email" />
        </div>
    </div>
    <div class="form-group col-sm-3">
        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>

            <input type="password" class="form-control" placeholder="Choose password" />
        </div>
    </div>
    <button type="submit" class="btn btn-default">Create account</button>
</div>

http://jsfiddle.net/n5qmc/

13
Damian Trzepała

Ce problème est connu et sera corrigé dans Bootstrap v.3.2.0 en fonction de this ship list .

Avant cela, vous pouvez le réparer vous-même comme ceci:

.input-group {
    display: inline-table;
    vertical-align: middle;

    .input-group-addon,
    .input-group-btn,
    .form-control {
        width: auto !important;
    }
}
30
Jeewes

Je ne suis pas sûr que cela soit utile, mais je pensais poster car je ne l'avais pas vu ailleurs. J'essayais d'obtenir un formulaire en ligne avec des étiquettes en ligne et un complément à l'aide de Bootstrap v3. Voici le code qui a fonctionné pour moi. J'ai utilisé le système de grille dans divs pour positionner l'étiquette, le groupe de saisie et l'add-on au sein d'un élément de la grille.

       <div class="form-group">
        <div class="col-sm-2">
          <label class="control-label" for="input_one">Label Text</label>
        </div>
        <div class="col-sm-10">
          <div class="input-group">
            <input class="form-control" placeholder="Placeholder Text" type="text" name="input_one" id="input_one">
            <span class="input-group-addon">Add on text</span>
          </div>
        </div>
      </div>
0
Ryan

Tiré de la documentation Bootstrap

Utilisez les classes de grille prédéfinies de Bootstrap pour aligner les étiquettes et les groupes de contrôles de formulaire dans une présentation horizontale en ajoutant .form-horizontal au formulaire. Cela change alors .form-groups pour se comporter comme des lignes de grille, donc nul besoin de .row. J'ai également ajouté des attributs sémantiques aux étiquettes que vous devriez toujours utiliser pour chaque entrée (utilisez .sr-only pour masquer les étiquettes si nécessaire). Cela rend le formulaire pas inline mais horizontal . 

<form class="form-horizontal" role="form">
       <div class="form-group">
          <label for="email" class="sr-only">Email</label>
          <div class="input-group col-sm-3"> 
              <span class="input-group-addon">
                  <i class="fa fa-envelope-o fa-fw"></i>
              </span>                            
              <input type="email" id="email" name="email" class="form-control" placeholder="Enter email" />
        </div>
        <div class="form-group">
            <label for="password" class="sr-only">Password</label>
            <div class="input-group col-sm-3"> 
                <span class="input-group-addon">
                    <i class="fa fa-key fa-fw"></i>
                </span>
                <input type="password" id="password" name="password" class="form-control" placeholder="Choose password" />
            </div>  
        </div>
        <button type="submit" class="btn btn-default">Create account</button>
</form>
0
jessie james jackson taylor