Pourquoi mes champs de formulaire Twitter Bootstrap débordent-ils de leur puits en utilisant un conteneur de fluide?

Question

Mise à JOUR: Démo de problème ici: http://jsfiddle.net/fdB5Q/embedded/result/

À partir d'environ 767px à 998px, les champs du formulaire sont plus larges que le contenant bien.

Plus petit que 767px et l'ensemble de la zone de formulaire se déplace à une nouvelle ligne. La page affichée lorsque la fenêtre du navigateur est à propos de 200px de large affiche parfaitement. Les champs du formulaire rétrécir comme vous le souhaitez.

Pour un visuel, regardez cette question très semblable: Twitter Bootstrap CSS statique des fluides-forme de positionnement

Voici le 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 le 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 suis l'incompréhension d'une partie du cadre. Devrais-je ne pas utiliser un récipient de liquide? Ce que je fais mal? J'ai pu jeter ensemble quelque chose pour résoudre ce problème, mais je pense que le problème peut être que je fais quelque chose de mal de la grande image.

J'ai essayé de changer mon travées de 7 et 5 et avait toujours la même erreur. J'ai essayé 6 et 6, mais à ce moment, la page a commencé à paraître ridicule. Le reste des réponses n'a pas de sens pour moi.

J'ai changé l'entrée de la classe de large au lieu de xlarge. Il avait toujours une largeur de gamme où il a débordé, et je voudrais vraiment plus large champs de formulaire si il ya de la place sur l'écran.

Je veux éviter de la barre de défilement horizontale, et je veux que le texte de la page pour être de la même taille en mode paysage ou en mode portrait sur mon smartphone.

Mise à JOUR: les Photos

Mon problème de page:

Version simplifiée:

Version simplifiée à 200 px de largeur du navigateur:

Answer 1

Habituellement, 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. Qui ne sera pas causer des bugs sur les différentes résolutions. Donc, j'ai ajouté un autre row-fluid de la classe dans ton élément avec span4 classe, et à l'intérieur que de nouveaux row-fluid ajouté div avec span12. Vous devez somethimes défaut de priorité Bootstrap paramètres pour obtenir ce que vous avez besoin, alors j'ai ajouté aussi la classe .my-input à l'intérieur d' <input /> élément pour obtenir 100% de la largeur et de supprimer à gauche et à droite de padding (rembourrage en sera la cause de bug sur le côté droit). 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 remplacer

​.my-input
{
    width: 100%;
    padding: 4px 0 4px 0 !important;
}​

Vous pouvez voir et Jsfiddle démo, essayez de redimensionner l'écran.

​

Answer 2

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 <input class='span3'/> 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.

Answer 3

Juste un peu de saisie, après en jouant avec ces pour TOUJOURS (il me semble). J'utilise un simple attribut width et entre 85% et 95% selon le conteneur, le rembourrage et autres css facteurs à garder les champs de saisie, du fait de l'étirement à bord du conteneur.

.input-example {
   width: 90%; 
}

JE NE SUIS PAS UN EXPERT DANS CE! Je suis simplement offrir ce que j'ai appris et s'il vous plaît ne prenez pas ce que les conseils d'un développeur chevronné. En essayant de donner un peu de retour pour une communauté qui a sauvé ma vie un nombre incalculable de fois.

Answer 4

Comme indiqué par Pavlo dans cette réponse: Twitter Bootstrap: arrête le champ de saisie au-delà du puits

L'utilisation de la classe input-block-level à la place de l'entrée-xlarge (ou d'autres tailles) résout également le problème.