Entrée des groupes de plus grande que l'entrée dans le Bootstrap 3 à l'aide de Jumbotron conteneur

Je suis en train d'expérimenter un comportement étrange avec Bootstrap 3 entrée des groupes. Quand j'ajoute une entrée-groupe-addon (texte ou icône) à un formulaire à l'intérieur d'un jumbotron, l'entrée-le groupe de la hauteur est plus grande que son entrée à la hauteur.

Ici vous pouvez trouver un JsFiddle et une capture d'écran du 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 vivant au http://jsfiddle.net/DTcHh/

Capture d'écran: Entrée des groupes de plus grande que l'entrée dans le Bootstrap 3 à l'aide de Jumbotron conteneur

Comment puis-je résoudre ce problème? Je suis à la recherche d'un fichier d'amorce de solution, mais si cela n'est pas possible serait sympa si vous pouviez m'aider à le résoudre avec des règles CSS.

InformationsquelleAutor David Moreno García | 2013-09-02
  1. 19

    Le bootstrap solution est d'ajouter le input-group-lg classe sur le contenant <div> - comme indiqué dans la documentation, mais vous remarquerez que l'addon est toujours légèrement plus grande que celle de l'entrée de sorte que vous pouvez ajuster la hauteur de la <input> de match; j'ai ajouté 5 px:

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

    • C'est pas encore tout à fait à droite (quelques px de large dans le bootstrap 3.0.3). Je hosang de la solution de résoudre le problème ci-dessous est probablement mieux
    • Je suis d'accord que la meilleure solution est la; je vais supprimer cette réponse si l'OP unaccepts il.
    • génial, travaillé parfait pour moi!!
    InformationsquelleAutor Adrift
  2. 33

    La nuit dernière, j'ai eu exactement le même problème. Aucun des correctifs mentionnés ci-dessus a travaillé dans mon contexte. Ce qui finalement ne faire le travail a été de déterminer la marge à 0:

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

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

    • Merci pour le poster! Sauver ma vie 😛 continuez sur cette 🙂
    • Je ne sais pas comment u le trouver, mais vous êtes f--le roi génial mec! merci beaucoup.
    • Génial fixer! J'avais été à elle pendant des heures.
    • Hmm, cela n'a pas de travail pour moi - la taille de l'addon est toujours disproportionnée. J'ai fini à l'aide de input-group-btn.
    • merci Bro , Vous avez sauvé mon temps
    InformationsquelleAutor goetz
  3. 10

    Le principal problème de .input-group-addon taille dans .jumbotron c'est qu'il hérite font-size de .jumbotron.

    Habituellement, les gens essaient de changer la hauteur, min-height ou rembourrage etc.

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

    Vous devez changer le font-size de .input-group PAS .input-group-addon comme ci-dessous.

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

    Regardant Bootstrap du doc comme à la Dérive suggère, votre code d'origine semble parfaitement valable. L'ajout de l'entrée-groupe-lg classe est l'endroit idéal si vous voulez de GRANDES, mais si vous ne le faites pas, c'est mal. À l'aide de IE9 et l'exécution de votre code dans mon propre environnement de dev et la Dérive du jsfiddle, il fonctionne correctement (pour moi) avec et sans l'entrée-groupe-lg classe, à l'exception bien sûr qu'avec elle c'est rendu grand. Peut-être un navigateur spécifique de la question??

    Cela dit, je suis confronté à un problème similaire d'essayer d'ajouter un bouton radio à l'avant d'un selectpicker. Eh bien...

    InformationsquelleAutor Will
  5. 0

    Je le fixe, il sera l'ajout d' id="search_button" de 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 de mon bouton:

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

    C'est tout.

    InformationsquelleAutor arielduarte
  6. -1

    Au lieu de faire l'entrée de plus grand, de faire de l'étendue de mesure (entrée-groupe-addon) plus petit. Pour le faire, son rembourrage inférieur. Donc:

    .input-group-addon {
    padding: 0px 6px;
}
    InformationsquelleAutor Ali Abdoli