web-dev-qa-db-fra.com

Groupes d'entrée plus grands que l'entrée dans Bootstrap 3 à l'aide du conteneur Jumbotron

J'expérimente un comportement étrange avec les groupes d'entrées Bootstrap 3. Lorsque j'ajoute un ajout de groupe d'entrée (texte ou icône) à un formulaire à l'intérieur d'un jumbotron, la hauteur du groupe d'entrée est supérieure à sa hauteur d'entrée.

Ici vous pouvez trouver un JsFiddle et une capture d'écran avec le problème:

<div class="jumbotron">
    <h1>Jumbotron with form</h1>
        <form>
           <div class="input-group">
               <input type="text" class="form-control" placeholder="Username">
                  <span class="input-group-addon">@</span>
           </div> 
        </form>
  </div>

Exemple en direct sur http://jsfiddle.net/DTcHh/

Capture d'écran: enter image description here

Comment puis-je résoudre ce problème? Je cherche une solution Bootstrap, mais si ce n’était pas possible, ce serait bien si vous pouviez m'aider à résoudre le problème avec des règles CSS.

csstwitter-bootstraptwitter-bootstrap-3
28
David Moreno García

La solution d’amorçage consiste à ajouter la classe input-group-lg au <div> contenant - comme indiqué dans la documentation , mais vous remarquerez que l’addon est toujours un peu plus grand que l’entrée, vous pouvez donc ajuster la hauteur du <input> pour correspondre ; J'ai ajouté 5 px:

http://jsfiddle.net/DTcHh/21/

19
Adrift

La nuit dernière, j'ai eu exactement le même problème. Aucune des corrections mentionnées ci-dessus n'a fonctionné dans mon contexte. En fin de compte, le travail a été de fixer la marge à 0:

.input-group .form-control {
    margin: 0px !important;
}

Peut-être que cela aide quelqu'un avec un problème similaire!

29
goetz

Le problème principal de .input-group-addon size dans .jumbotron est qu’il hérite defont-sizede .jumbotron.

Habituellement, les gens essaient de changer de hauteur, de hauteur minimale ou de rembourrage, etc.

Cependant la cause de la taille différente est que .input-group dans .jumbotron hérite"font-size: 21px;"

Vous devriez changer le font-size de .input-groupPAS.input-group-addon comme ci-dessous.

.input-group { font-size: 14px !important; }
10
Hosang Jeon

En regardant la documentation de Bootstrap, comme le suggère Adrift, votre code original semble parfaitement valide. L'ajout de la classe input-group-lg est idéal si vous voulez LARGE mais si vous ne le souhaitez pas, c'est une erreur. En utilisant IE9 et en exécutant votre code à la fois dans mon propre environnement de développement et dans jsfiddle d'Adrift, cela fonctionne correctement (pour moi) avec et sans la classe input-group-lg, sauf bien sûr avec son rendu grand. Peut-être un problème spécifique au navigateur?

Cela dit, je rencontre un problème similaire en essayant d’ajouter un bouton radio à l’avant d’un sélecteur de choix. Tant pis...

2
Will

J'ai corrigé l'ajout de id="search_button" à mon bouton:

<div class="input-group input-group-lg">
    <input type="text" class="form-control" placeholder="Username"/>
    <span class="input-group-btn">
        <button id="search_button" class="btn btn-primary" type="button">GO</button>
    </span>
</div>

J'ai ensuite appliqué le style suivant à mon bouton:

#search_button {
    width: 90px;
    margin: 0 auto;
    text-align: justify;
}

C'est tout.

0
arielduarte