Twitter Bootstrap: Arrêt champ de saisie s'étendant bien au-delà de

Je vais avoir du mal à essayer de résoudre ce problème. Les docs disent que je devrait définir la durée égale à la mère durée, cependant, il s'étend vers la droite à l'extérieur de la bien conteneur quand je fais ça. Il semble bien, lors de l'affichage sur mobile (étend le montant approprié pour le droit, remplir le bien), cependant, il ne fait pas de bien jouer sur le bureau (je veux les champs d'étendre à l'intérieur du bien).

<div class="container">
    <div class="row">
        <div class="span4 offset4">
            <div id="login-panel">
                <div class="well bordered clearfix">
                    <div class="text-center">
                        <div class="page-header" style="border-bottom: none; margin: 0;">
                            <img src="library/img/logo-01.png"/>
                        </div>
                    </div>
                    <form method="POST" action="#" accept-charset="UTF-8" class="pull-left">
                        <legend>App name</legend>
                        <div class="control-group ">
                            <!-- username field -->
                            <div class="controls">
                                <label>Email</label>
                                <input class="span4" type="text" name="email" value="" id="email" placeholder="Your email address">
                            </div>
                        </div>

                        <div class="control-group">
                            <label>Password</label>
                            <!-- password field -->
                            <input type="password" name="password" id="password" placeholder="Password">
                        </div>
                        <div class="control-group ">
                            <p>
                                <input class="btn btn-default pull-left" type="submit" value="Sign-up">
                                <input class="btn btn-primary pull-right" type="submit" value="Login">
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- end row -->
</div> <!-- end container -->
Utiliser max-width: 100% sur le champs de saisie, comme décrit ici: stackoverflow.com/questions/11855086/...

OriginalL'auteur Niall O'Brien | 2012-08-30

  1. 30

    Docs sont en train de dire:

    Utilisation .span1 à .span12 pour les entrées qui correspondent à la même taille de la grille
    les colonnes.

    Mais vous voulez faire une pleine largeur <input>, droit?

    Faire un <input> de prendre toute la largeur

    input.full-width {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
}

    Également supprimer .pull-left de la <form>. Voir comment il woks sur ce violon.

    Modifier

    Depuis Bootstrap 2.2.0 utilisation livré input-block-level classe pour obtenir cet effet.

    Merci pour l' .d'entrée de niveau de bloc d'indice!
    Merci, dommage qu'ils ne le mentionnez pas dans leurs docs.
    yipeeeee...il a travaillé pour moi aussi avec la version 2, merci

    OriginalL'auteur Pavlo

  2. 0

    J'ai rencontré ce problème récemment avec la forme et le panneau d'administration. Lors de l'inspection, j'ai remarqué que le problème n'était pas les entrées, mais plutôt la forme elle-même était au-delà du panneau. J'ai corrigé en mettant un max-width: 100% sur l'écran à la place de l'entrée.

    OriginalL'auteur dpsthree