Largeurs d'entrée sur Bootstrap 3
Mettez à jour à nouveau: Je termine cette question en sélectionnant la réponse principale pour empêcher les gens d'ajouter des réponses sans vraiment comprendre la question. En réalité, il n’ya aucun moyen de le faire avec la fonctionnalité intégrée sans utiliser la grille ou en ajoutant des CSS supplémentaires. Les grilles ne fonctionnent pas bien si vous traitez avec help-block éléments qui doivent aller au-delà d'une entrée courte par exemple, mais ils sont "intégrés". Si c'est un problème, je vous 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 inclus dimensionnement pour gérer cela, de sorte que cela ne sera plus d'actualité. Merci à tous pour vos commentaires sur cette question populaire SO.
Mise à jour: Cette question reste ouverte car il s'agit de la fonctionnalité intégrée dans BS pour gérer la largeur de saisie. sans recourir au réseau (ils doivent parfois être gérés de manière indépendante). J'utilise déjà des classes personnalisées pour gérer cela, donc ce n'est pas un tutoriel sur les CSS de base. La tâche est en BS liste de discussion des fonctionnalités 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 la BS 3? J'utilise actuellement certaines classes personnalisées pour ajouter cette fonctionnalité, mais j'ai peut-être manqué des options non documentées.
Les documents actuels disent utiliser .col-lg-x mais cela ne fonctionne clairement pas, car cela ne peut être appliqué qu'au conteneur div, ce qui provoque alors toutes sortes de problèmes de disposition/float.
Voici un violon. Bizarre, c'est que sur le violon, je ne peux même pas redimensionner le groupe de formulaires.
<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 d'encapsuler chaque groupe dans une rangée, pas le formulaire complet avec une seule rangée. 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: NEW 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 utilisez uniquement 'col-lg-1'. Cela signifie que si la largeur de l'écran est inférieure à la taille de la requête de média 'lg', le comportement de bloc par défaut est utilisé. Fondamentalement, en appliquant uniquement "col-lg-1", la logique que vous utilisez est la suivante:
IF SCREEN WIDTH < 'lg' (1200px by default)
USE DEFAULT BLOCK BEHAVIOUR (width=100%)
ELSE
APPLY 'col-lg-1' (~95px)
Voir système de grille Bootstrap pour plus d'informations. J'espère que j'ai é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;
}
Puis 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 besoin de mettre un balisage supplémentaire pour la mise en page dans votre code HTML.
ASP.net MVC aller à Content- Site.css et supprimer ou commenter cette ligne:
input,
select,
textarea {
/*max-width: 280px;*/
}
Les documents actuels disent d’utiliser .col-xs-x, pas de lg. Ensuite, j'essaye de jouer du violon et ça a l'air de marcher:
http://jsfiddle.net/tX3ae/225/
pour garder la disposition, vous pouvez peut-être changer où vous mettez la classe "rangée" 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>
Je pense que vous devez envelopper les entrées dans un col-lg-4, puis dans le 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 de la Bootstrap 3 docs ..
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 devez définir une largeur pour les contrôles de formulaire utilisés dans.
Donc, une autre option consiste à définir une largeur spécifique en utilisant CSS:
.form-control {
width:100px;
}
Ou bien, appliquez le col-sm-* au `groupe de formulaires '.
<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
Si vous utilisez le modèle Master.Site dans Visual Studio 15, le projet de base contient "Site.css", qui surpasse la largeur des champs de contrôle de formulaire.
Je ne pouvais pas obtenir la largeur de mes zones de texte pour obtenir une largeur supérieure à environ 300 pixels de large. J'ai essayé TOUT et rien n'a fonctionné. J'ai constaté 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 votre champ.
/* 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 vieux fil de discussion, 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. J'ai donc corrigé mon formulaire en ligne comme suit: -
<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 hacky pirater, mais a fait le travail pour un formulaire en ligne.
Dans Bootstrap 3
Tous les éléments textuels <input>, <textarea> et <select> avec .form-control sont réglés sur width: 100%; par défaut.
http://getbootstrap.com/css/#forms-example
Il semble que, dans certains cas, nous devons définir manuellement la largeur maximale souhaitée pour les entrées.
Quoi qu'il en soit, votre exemple fonctionne. Il suffit de vérifier avec un grand écran, de sorte que vous pouvez voir le nom et les champs de messagerie reçoivent le 2/12 de avec (col-lg-1 + col-lg-1 et vous avez 12 colonnes). Mais si vous avez un écran plus petit (il suffit de redimensionner 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="...">
Vous pouvez ajouter l'attribut style ou une définition pour la balise d'entrée dans un fichier CSS.
Option 1: ajout de l'attribut 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 auto
J'espère que je pourrais aider.
Si vous cherchez simplement à réduire ou à augmenter la largeur des éléments d’entrée de Bootstrap à votre convenance, j’utiliserais max-width dans 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 à 500px. De cette façon, vous n’aurez besoin d’aucun système de grille de Bootstrap et le formulaire restera réactif.
Bootstrap utilise la classe 'form-input' pour contrôler les attributs des 'champs d'entrée'. Ajoutez simplement votre propre classe 'entrée de formulaire' avec la largeur, la bordure, la taille du texte, etc. souhaitées dans votre fichier CSS ou votre section head.
(ou bien ajoutez directement le code en ligne size = '5' dans les attributs d’entrée de la section body.)
<script async src="//jsfiddle.net/tX3ae/embed/"></script>
Ajouter et définir des termes pour le style="" dans le champ de saisie, voici le moyen le plus simple de s'y prendre: 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>
Je ne sais pas pourquoi tout le monde semble avoir oublié le fichier site.css du dossier Content. Regardez la ligne 22 de ce fichier et vous verrez les paramètres pour que l'entrée soit contrôlée. 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 ça marche très bien.
Vous ne devriez jamais mettre à jour bootstrap.css ou bootstrap.min.css. Cela vous évitera d'être mis à jour lorsque bootstrap sera mis à jour. C'est pourquoi le fichier site.css est inclus. C’est là que vous pouvez modifier le site tout en conservant le design réactif que vous recherchez.
Je suis également aux prises avec le même problème, et voici 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 définie à 100% par défaut. La largeur est donc identique à la largeur couverte.
Ce n'est pas la meilleure façon, mais la solution la plus simple et la plus simple pour résoudre le problème.
J'espère que cela a aidé.
Bootstrap 3, j’ai réalisé une belle mise en page de formulaire réactif en utilisant les éléments suivants:
<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>