Pourquoi mes champs de formulaire Twitter Bootstrap débordent-ils de leur puits avec un conteneur de fluide?
UPDATE: Démo du problème ici: http://jsfiddle.net/fdB5Q/embedded/result/
De 767px à 998px environ, les champs de formulaire sont plus larges que le puits contenant.
Plus petit que 767px et toute la zone de formulaire passe à une nouvelle ligne. La page affichée lorsque la fenêtre du navigateur mesure environ 200 pixels de large s’affiche parfaitement. Les champs de formulaire se réduisent comme prévu.
Pour un visuel, regardez cette question très similaire: Twitter Bootstrap CSS positionnement de formulaire statique-fluide
Voici tout dans la tête:
<link rel="stylesheet" href="http://Twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://Twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
Voici tout dans le corps:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<p>Some Content.</p>
</div>
<div class="span4">
<div class="well">
<div class="control-group">
<label class="control-label" for="name">Your Name</label>
<div class="controls">
<input type="text" class="input-xlarge" name="name" id="name" maxlength="100" />
</div>
</div>
</div>
</div>
</div>
</div>
Je pense que je comprends mal une partie du cadre. Ne devrais-je pas utiliser un réservoir de liquide? Qu'est-ce que je fais mal? Je pourrais concocter quelque chose pour résoudre ce problème, mais je pense que le problème est peut-être que je fais quelque chose qui cloche.
J'ai essayé de changer mes plages en 7 et 5 et j'ai toujours la même erreur. J'ai essayé 6 et 6, mais à ce moment-là, la page a commencé à paraître ridicule. Le reste des réponses n'avait pas de sens pour moi.
J'ai changé la classe d'entrée en large au lieu de xlarge. Il y avait toujours une plage de largeurs où il débordait et je voudrais vraiment des champs de formulaire plus larges s’il ya de la place sur l’affichage.
Je souhaite éviter la barre de défilement horizontale et je veux que le texte de la page soit de la même taille en mode paysage ou portrait sur mon smartphone.
MISE À JOUR: Photos
Ma page de problème:
Version simplifiée:
Version simplifiée à 200 px de largeur de navigateur:
Les balises html en entrée et leurs styles .input-* correspondants ne définissent que la variable css width. C'est par conception.
Toutefois, l’ajout d’un max-width:100% css garantira le contrôle des entrées trop volumineuses.
par exemple. ajoutez ceci à votre tête:
<style>
input {
max-width: 100%;
}
</style>
Je viens tout juste de rencontrer ce problème et lors de la vérification des entrées de formulaire dans la documentation d'amorçage, il est indiqué: "Utilisez des classes de dimensionnement relatives telles que .input-large ou adaptez vos entrées aux tailles de colonne de la grille à l'aide des classes .span *."
Ma ligne de démarrage a été définie sur span9 pour le contenu et span3 pour la barre latérale. Le réglage de <input class='span3'/> a résolu le problème pour moi, les zones de saisie restent dans la barre latérale à mesure que la taille de l’écran diminuait.
En général, je préfère utiliser un autre class="row-fluid" et class="span12" dans les éléments avec class="spanX" pour obtenir 100% de la largeur de certains éléments. Cela ne causera pas de bugs sur différentes résolutions. Donc, j'ai ajouté une autre classe row-fluid dans votre élément avec la classe span4 et, à l'intérieur de cette nouvelle row-fluid, ajouté un div avec span12. Vous devez parfois remplacer les paramètres Bootstrap par défaut pour obtenir ce dont vous avez besoin. J'ai donc ajouté la classe .my-input à l'intérieur de l'élément <input /> pour obtenir une largeur de 100% et supprimer le remplissage à gauche et à droite (le remplissage causera un bogue à droite). Et voici le code:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<p>Some Content.</p>
</div>
<div class="span4 well">
<div class="row-fluid">
<div class="span12">
<label class="control-label" for="name">Your Name</label>
<input type="text" class="my-input" name="name" id="name" maxlength="100" />
</div>
</div>
</div>
</div>
</div>
et classe CSS pour le remplacement
.my-input
{
width: 100%;
padding: 4px 0 4px 0 !important;
}
Vous pouvez voir et Jsfiddle demo , essayez de redimensionner l’écran.
Le plus grand centre commercial
Le problème est plus insidieux que tout cela à résoudre, malheureusement. L'utilisation de max-widths n'a rien fait pour moi. Et je déteste les choses qui ont l'air minables, alors je me suis un peu plongé dedans ...
Cela revient à ces trois lignes dans la déclaration CSS d'un contrôle de formulaire:
width: 100%;
padding: 6px 12px;
border: 1px solid #cccccc;
Lorsque la largeur d'un élément d'entrée de type texte est définie, le remplissage et la bordure horizontaux sont ajoutés au 100% au lieu d'être extraits de celui-ci. Ainsi, si la largeur de 100% w était égale à 500px, la largeur du contrôle de formulaire de saisie de texte devient w + 12 + 12 + 1 + 1, 526px. Les 26px supplémentaires sont une constante, ce qui signifie que si le pourcentage de largeur n'est pas calculé de manière dynamique, sous la forme 100% * (w/(w + 26px)) ou 100% à 26px, rien ne sortira jamais.
Personnellement, je pense que c'est une erreur de définition ou de mise en oeuvre de l'interface html/css (je ne sais pas laquelle, je ne veux vraiment pas essayer de trouver les références dans les normes changeantes.) Si vous indiquez qu'un champ de saisie doit avoir une largeur de 100%, la correction doit être appliquée pour que la largeur à l'intérieur des marges soit de 100% et non de 100% sans la marge de remplissage horizontale et les largeurs de bordure incluses.
Et, à propos, la valeur en pourcentage ou la taille fixe importent peu; ils sont également désactivés par 26px. Vous devez filtrer ces 26px de la largeur.
Toutefois, tout n’est pas perdu pour les entrées textuelles bootstrap, du moins si vous utilisez un compilateur CSS qui permet des calculs côté client. En moins, par exemple
input.form-control[type=text] {
width: calc(~'100%-26px');
}
cela rendra tout meilleur. Notez que les types de courrier électronique et de mot de passe (au moins) ont également le même problème.
Bien sûr, 26px est un peu fragile, mais les constantes sont codées en dur dans la déclaration de contrôle de forme, vous avez donc les mains liées. Un test serait Nice qui a vérifié la taille des contrôles de rendu pour détecter les changements de déclaration CSS sur les mises à niveau de bootstrap, mais pas ce soir, merci.
Juste un peu d’entrée après avoir joué avec FOREVER (semble-t-il). J'utilise un attribut simple width et le règle entre 85% et 95%, en fonction du conteneur, du remplissage et d'autres facteurs CSS, afin que les champs d'entrée ne s'étirent pas réellement jusqu'au bord du conteneur.
.input-example {
width: 90%;
}
JE NE SUIS PAS UN EXPERT AT CECI! Je ne fais que proposer ce que j'ai appris et ne prenez pas cela comme un conseil d'un développeur expérimenté. Essayer de redonner un peu à une communauté qui m'a sauvé la vie à d'innombrables occasions.
Comme indiqué par Pavlo dans cette réponse: Twitter Bootstrap: le champ de saisie Stop va bien au-delà
L'utilisation de la classe input-block-level à la place de input-xlarge (ou d'autres tailles) résout également le problème.
J'ai rencontré ce problème avec les entrées de formulaire et le corps du panneau. Je lui ai répondu dans l’article suivant: Twitter Bootstrap: Arrête le champ de saisie s’étendant bien au-delà
Le problème pour moi était que le formulaire débordait. Cela a permis aux entrées de faire de même. En fixant la largeur maximale du formulaire (largeur maximale: 100%), j'ai pu fixer des entrées ainsi que tout autre contenu pouvant être placé à l'intérieur du formulaire.