Largeurs d'entrée sur Bootstrap 3

Question

Quiconque de trouver un moyen de gérer la saisie de la largeur sur BS 3? Je suis actuellement à l'aide de quelques classes personnalisées pour ajouter cette fonctionnalité, mais j'ai peut-être oublié quelques non documenté options.

Actuel docs disent à utiliser .col-lg-x mais qui, manifestement, ne fonctionne pas comme il ne peut être appliqué à la div conteneur qui provoque toutes sortes de mise en page/float questions.

Voici un violon. Bizarre, c'est que sur le violon, je ne peux même pas obtenir le formulaire-groupe pour les redimensionner.

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Answer 1

Ce que vous voulez faire est certainement réalisable.

Ce que vous voulez est d'envelopper chaque "groupe" dans une ligne, pas la forme entière avec juste une ligne. Ici:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

La NOUVELLE jsfiddle j'ai fait: NOUVEAU jsfiddle

Notez que dans le nouveau violon, j'ai aussi ajouté "col-xs-5' de sorte que vous pouvez le voir dans les petits écrans de trop de les retirer ne fait aucune différence. Mais gardez à l'esprit dans vos classes d'origine, vous êtes seulement en utilisant "col-lg-1'. Cela signifie que si la largeur de l'écran est plus petit que l 'lg' media query taille, puis le bloc par défaut le comportement est utilisé. Fondamentalement, en ne s'appliquant au "col-lg-1', la logique vous êtes employant est:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

Voir Bootstrap 3 système de grille pour plus d'info. J'espère que j'ai été clair, sinon, laissez-moi savoir et je l'avais élaboré.

Answer 2

En Bootstrap 3

Vous pouvez simplement créer un style personnalisé :

Puis l’ajouter aux contrôles d’un formulaire comme suit :

De cette façon, que vous n’avez pas à mettre un balisage supplémentaire pour la mise en page dans votre code HTML.

Answer 3

Je pense que vous avez besoin d'envelopper les entrées à l'intérieur d'un col-lg-4, puis à l'intérieur de l' form-group et tout cela est contenu dans un form-horizontal..

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

Démo sur Bootply - http://bootply.com/78156

EDIT: à Partir du Bootstrap 3 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 les contrôles de formulaire utilisé à l'intérieur.

Une autre option est de définir une largeur spécifique à l'aide de CSS:

.form-control {
    width:100px;
}

Ou, appliquez l' col-sm-* pour le "form-group".

Answer 4

 <div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
 

Ajouter la classe à form.group pour contraindre les entrées

Answer 5

Dans Le Bootstrap 3

Tous les < input >, < textarea >, < select >.formulaire de contrôle sont fixées à l'width: 100%; par défaut.

http://getbootstrap.com/css/#forms-example

Il semble, dans certains cas, nous avons de régler manuellement la largeur maximale que nous voulons pour les entrées.

De toute façon, ton exemple fonctionne. Il suffit de vérifier avec un grand écran, de sorte que vous pouvez voir le nom et l'email sont les champs d'obtenir le 2/12 de la avec (col-lg-1 + col-lg-1 et que vous avez 12 colonnes). Mais si vous avez un petit écran (il suffit de les redimensionner votre navigateur), les entrées étendra jusqu'à la fin de la ligne.