Twitter Bootstrap 3 formulaire de saisie de texte en ligne de la largeur dépend de la largeur d'étiquette

J'ai remarqué le comportement étrange de le Twitter Bootstrap 3: la taille de la zone d'entrée dépend de la taille de l'étiquette lorsqu'ils sont regroupés de la forme-groupe:

<form class="form-inline">
    <div class="form-group">
        <label>A</label>
        <input type="text" class="form-control" placeholder="First Name">
        </div>
    <div class="form-group">
        <label>Last Name</label>
        <input type="text" class="form-control" placeholder="Last Name">
    </div>
</form>

Voici la démo: http://jsfiddle.net/a3vAP/4/

Est cette caractéristique ou un bug? Quelle serait la solution? J'ai besoin de boîtes de saisie de la même taille.

OriginalL'auteur Zoran Kalinić | 2013-10-15

  1. 15

    Le plus de l'étiquette est à l'origine de l'entrée pour être plus depuis qu'ils sont tous deux contenus dans le même form-group qui utilise display:inline-block donc c'est automatiquement le dimensionnement de la largeur de la label.

    Selon le Bootstrap docs..

    Entrées", sélectionne, et ces zones de texte sont 100% de largeur par défaut dans le Bootstrap.
    Utilisation de la vue formulaire, vous devrez définir une largeur sur la forme
    les contrôles mis en place à l'intérieur."

    Donc, vous auriez besoin d'ajouter un peu de CSS simple de contrôler la largeur..

    .form-inline .form-group input {
    width:140px;
}

    Démo: http://bootply.com/87747

    Une chose que j'ai remarque - cette CSS ne fonctionne pas correctement pour moi comme je l'ai trop été en utilisant un form-inline classe. L'inspection du Bootstrap docs 1er il était la suivante: "Cela s'applique uniquement aux formes à l'intérieur de fenêtres qui sont au moins 768px large". Le résultant CSS inspection a également fourni la suivante dans le navigateur: @media (min-width: 768px) Donc mes principales de style ne prennent pas effet jusqu'à ce que la fenêtre a été < 768, et puis mon entrée a changé à la taille que je voulais à l'aide de la CSS de cette réponse. :S Vous aurez à faire face à cette requête de média si vous utilisez form-inline

    OriginalL'auteur Zim