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:
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.
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:
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!
Le problème principal de .input-group-addon
size dans .jumbotron
est qu’il hérite defont-size
de .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-group
PAS.input-group-addon
comme ci-dessous.
.input-group { font-size: 14px !important; }
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...
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.