Largeurs d'entrée sur Bootstrap 3

Mettre à jour à nouveau: je ferme cette question en sélectionnant la première réponse pour empêcher les gens d'ajouter des réponses sans vraiment comprendre la question. En réalité, il n'y a aucun moyen de le faire avec la fonctionnalité intégrée sans utiliser de grille ni ajouter de css supplémentaire. Les grilles ne fonctionnent pas bien si vous avez affaire à des help-blockéléments qui doivent aller au-delà d'une courte entrée, par exemple, mais ils sont «intégrés». Si c'est un problème, je recommande d'utiliser des classes css supplémentaires que vous pouvez trouver dans la discussion BS3 ici . Maintenant que BS4 est sorti, il est possible d'utiliser les styles de dimensionnement inclus pour gérer cela, donc cela ne sera plus pertinent pour beaucoup plus longtemps. Merci à tous pour votre bonne contribution à cette question SO populaire.

Mise à jour: Cette question reste ouverte car il est sur le point intégré fonctionnalité BS pour gérer la largeur d' entrée sans avoir recours à la grille (parfois ils doivent être gérés indépendamment). J'utilise déjà des classes personnalisées pour gérer cela, donc ce n'est pas un guide sur le CSS de base. La tâche est dans la liste de discussion des fonctionnalités BS et n'a pas encore été traitée.

Question originale: Quelqu'un trouve-t-il un moyen de gérer la largeur d'entrée sur BS 3? J'utilise actuellement des classes personnalisées pour ajouter cette fonctionnalité, mais j'ai peut-être manqué certaines options non documentées.

La documentation actuelle dit d'utiliser .col-lg-x mais cela ne fonctionne clairement pas car il ne peut être appliqué qu'au conteneur div, ce qui provoque alors toutes sortes de problèmes de mise en page / flottant.

Voici un violon. Bizarre, c'est que sur le violon, je ne peux même pas faire redimensionner le groupe de formulaires.

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>

Ce que vous voulez faire est certainement réalisable.

Ce que vous voulez, c'est encapsuler chaque «groupe» dans une ligne, pas le formulaire entier avec une seule 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>

Le NOUVEAU jsfiddle que j'ai fait: NOUVEAU jsfiddle

Notez que dans le nouveau violon, j'ai également ajouté 'col-xs-5' pour que vous puissiez le voir également sur des écrans plus petits - les supprimer ne fait aucune différence. Mais gardez à l'esprit que dans vos classes d'origine, vous n'utilisez que «col-lg-1». Cela signifie que si la largeur de l'écran est inférieure à la taille de la requête multimédia «lg», le comportement de bloc par défaut est utilisé. Fondamentalement, en appliquant uniquement 'col-lg-1', la logique que vous employez est:

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

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

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

Voir le système de grille Bootstrap 3 pour plus d'informations. J'espère avoir été clair, sinon faites-le moi savoir et je développerais.

Dans Bootstrap 3

Vous pouvez simplement créer un style personnalisé:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

Ensuite, ajoutez-le pour former des contrôles comme ceci:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

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

ASP.net MVC allez sur Content- Site.css et supprimez ou commentez cette ligne:

input,
select,
textarea {
    /*max-width: 280px;*/
}

Je pense que vous devez envelopper les entrées dans un col-lg-4, puis dans le form-groupet tout 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 de la documentation Bootstrap 3.

Les entrées, les sélections et les zones de texte ont une largeur de 100% par défaut dans Bootstrap. Pour utiliser le formulaire en ligne, vous devrez définir une largeur sur les contrôles de formulaire utilisés dans.

Une autre option consiste donc à définir une largeur spécifique en utilisant CSS:

.form-control {
    width:100px;
}

Ou appliquez le col-sm-*au `form-group '.

La documentation actuelle dit d'utiliser .col-xs-x, pas de lg. Ensuite, j'essaye en violon et ça a l'air de marcher:

http://jsfiddle.net/tX3ae/225/

pour conserver la mise en page, vous pouvez peut-être changer l'emplacement de la classe "ligne" comme ceci:

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

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

http://jsfiddle.net/tX3ae/226/

<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>

Ajoutez la classe au form.group pour contraindre les entrées

Si vous utilisez le modèle Master.Site dans Visual Studio 15, le projet de base a «Site.css» qui REMPLACE la largeur des champs de contrôle de formulaire.

Je ne pouvais pas obtenir la largeur de mes zones de texte plus large qu'environ 300 px de large. J'ai tout essayé et rien n'a fonctionné. J'ai trouvé qu'il y avait un paramètre dans Site.css qui causait le problème.

Débarrassez-vous de cela et vous pourrez contrôler la largeur de vos champs.

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

Je sais que c'est un ancien fil, mais j'ai rencontré le même problème avec un formulaire en ligne, et aucune des options ci-dessus n'a résolu le problème. Alors j'ai corrigé mon formulaire en ligne comme ceci: -

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

C'était ma solution. Bit hack hack, mais a fait le travail pour un formulaire en ligne.

Vous pouvez ajouter l'attribut de style ou vous pouvez ajouter une définition pour la balise d'entrée dans un fichier css.

Option 1: ajouter l'attribut de style

<input type="text" class="form-control" id="ex1" style="width: 100px;">

Option 2: définition en CSS

input{
  width: 100px
}

Vous pouvez changer le 100px en automatique

J'espère que je pourrais aider.

Dans Bootstrap 3

Tous les éléments textuels <input>, <textarea> et <select> avec .form-control sont définis sur width: 100%; par défaut.

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

Il semble, dans certains cas, que nous devions définir manuellement la largeur maximale souhaitée pour les entrées.

Quoi qu'il en soit, votre exemple fonctionne. Vérifiez-le simplement avec un grand écran, afin que vous puissiez voir que les champs de nom et d'email obtiennent le 2/12 du avec (col-lg-1 + col-lg-1 et vous avez 12 colonnes). Mais si vous avez un écran plus petit (redimensionnez simplement votre navigateur), les entrées se développeront jusqu'à la fin de la ligne.

Vous n'êtes pas obligé d'abandonner le simple CSS :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

Si vous cherchez simplement à réduire ou augmenter la largeur des éléments d'entrée de Bootstrap à votre guise, j'utiliserais max-widthdans le CSS.

Voici un exemple très simple que j'ai créé:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

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

J'ai défini la largeur maximale du formulaire entier à 500 pixels. De cette façon, vous n'aurez pas besoin d'utiliser le système de grille de Bootstrap et il gardera également le formulaire réactif.

Je suis également aux prises avec le même problème, et c'est ma solution.

Source HTML

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

Couvrir le code d'entrée avec une autre classe div

Source CSS

.input_width{
   width: 450px;
}

donnez n'importe quel réglage de largeur ou de marge sur la classe div couverte.

La largeur d'entrée de Bootstrap est toujours par défaut de 100%, donc la largeur suit cette largeur couverte.

Ce n'est pas la meilleure façon, mais la solution la plus simple et la seule que j'ai résolu le problème.

J'espère que cela a aidé.

Je ne sais pas pourquoi tout le monde semble ignorer le fichier site.css dans le dossier Contenu. Regardez la ligne 22 de ce fichier et vous verrez les paramètres d'entrée à contrôler. Il semblerait que votre site ne fasse pas référence à cette feuille de style.

J'ai ajouté ceci:

input, select, textarea { max-width: 280px;}

à votre violon et cela fonctionne très bien.

Vous ne devriez jamais mettre à jour bootstrap.css ou bootstrap.min.css. Cela vous mettra en échec lorsque le bootstrap sera mis à jour. C'est pourquoi le fichier site.css est inclus. C'est là que vous pouvez apporter des modifications au site qui vous donneront toujours le design réactif que vous recherchez.

Voici le violon qui fonctionne

Ajoutez et définissez des termes pour le style=""dans le champ de saisie, c'est la façon la plus simple de procéder: Exemple:

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Bootstrap utilise la classe 'form-input' pour contrôler les attributs des 'champs d'entrée'. Ajoutez simplement votre propre classe 'form-input' avec la largeur, la bordure, la taille de texte, etc. désirées dans votre fichier css ou dans la section head.

(ou bien, ajoutez directement le code en ligne size = '5' dans les attributs d'entrée dans la section body.)

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 

Bootstrap 3 J'ai réalisé une belle mise en page de formulaire réactive en utilisant ce qui suit:

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>