Bootstrap 3 forme de case à cocher étiquette ne s'aligne pas avec la case d'entrée en Chrome + Firefox

Dans chrome et firefox:

  • form-inline provoque l'étiquette doit être décalé vers le bas et l'espace entre la case et l'étiquette est plus étroite que lors de l'utilisation de form-horizontal.
  • form-horizontal affiche parfaitement

Voici une démo en jsFiddle

Voici un code:

<form class="form-inline">
    <div class="checkbox">
        <label>
            <input type="checkbox"/> Test againn
        </label>
    </div>
</form>

Voici une capture d'écran:

Bootstrap 3 forme de case à cocher étiquette ne s'aligne pas avec la case d'entrée en Chrome + Firefox

Est-il un moyen de rendre les cases alignées correctement dans les navigateurs, ou ai-je raté quelque chose?

InformationsquelleAutor user21398 | 2014-06-25
  1. 28

    C'est vraiment un problème dans tous les navigateurs (que j'ai testé)

    Voici une capture d'écran - j'ai ajouté une bordure grise de sorte qu'il est plus facile de dire que c'est pas en alignant.

    Bootstrap 3 forme de case à cocher étiquette ne s'aligne pas avec la case d'entrée en Chrome + Firefox

    Voici une démo qui reproduit le problème

    Le problème se produit lorsque le inline formulaire est sur un écran qui est plus grand que 768px.

    En particulier, le truc qui bousille l'alignement est à partir de cette ligne de formulaires.moins (qui a été introduit avec ce commit):

    float: none;

    Naïvement, la définition de cette valeur de retour à float: left semble résoudre le problème, mais je ne suis pas sûr de ce que d'autres problèmes peuvent se poser. 

    @media (min-width: 768px) {
    .form-inline .radio input[type="radio"], 
    .form-inline .checkbox input[type="checkbox"] {
        float: left;
        margin-right: 5px;
    }
}

    Voici une version de travail de votre code avec ces changements

    Autre que cela, vous avez juste à bidouiller le CSS

    InformationsquelleAutor KyleMit
  2. 16

    J'ai eu le mien fonctionne après un changement de radio or checkbox à radio-inline or checkbox-inline classe

    http://jsfiddle.net/gn9Up/57/

    • oui, mais si vous redimensionnez votre navigateur pour xs taille, vous n'obtiendrez pas de "forme verticale" pour vos cases à cocher, il restera à être insérée.
    InformationsquelleAutor DagicCross
  3. 4

    Dans mon cas, aucune réponse n'a résolu le problème. C'est ce que j'ai fait pour aligner correctement l'entrée avec l'étiquette. Une ont ajouté 2px à la marge supérieure. Dans bootstrap.css il est mis à l'4px. Le paramètre 6px "résoudre" le problème.

    CSS

    input[type=checkbox] {
    margin: 6px 0 0;
}

    HTML

    <label class="checkbox-inline">
    <input type="checkbox" value=""> Label text
</label>
    • Cette solution est la seule qui a fonctionné pour moi! merci!!!!!
    InformationsquelleAutor Merlin