Warum laufen meine Twitter-Bootstrap-Formularfelder mit Flüssigkeitsbehältern über?

UPDATE: Demo des Problems hier: http://jsfiddle.net/fdB5Q/embedded/result/

Von etwa 767 px bis 998 px sind die Formularfelder breiter als die enthaltenden Vertiefungen.

Kleiner als 767px und der gesamte Formularbereich verschiebt sich in eine neue Zeile. Die Seite, die gerendert wird, wenn das Browserfenster etwa 200 Pixel breit ist, wird perfekt angezeigt. Die Formularfelder werden erwartungsgemäß verkleinert.

Sehen Sie sich zur Veranschaulichung diese sehr ähnliche Frage an: Twitter Bootstrap CSS Static-Fluid Form Positioning

Hier ist alles im Kopf:

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

Hier ist alles im Körper:

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

Ich glaube, ich verstehe einen Teil des Rahmens falsch. Sollte ich keinen Flüssigkeitsbehälter verwenden? Was mache ich falsch? Ich könnte etwas zusammenwerfen, um dies zu beheben, aber ich denke, das Problem könnte darin bestehen, dass ich im Großen und Ganzen etwas falsch mache.

Ich habe versucht, meine Spannen auf 7 und 5 zu ändern, und hatte immer noch den gleichen Fehler. Ich habe es mit 6 und 6 versucht, aber an diesem Punkt sah die Seite lächerlich aus. Die restlichen Antworten ergaben für mich keinen Sinn.

Ich habe die Eingabeklasse von xlarge auf large geändert. Es hatte immer noch einen breiten Bereich, wo es überlief, und ich hätte wirklich gerne breitere Formularfelder, wenn auf dem Display Platz ist.

Ich möchte die horizontale Bildlaufleiste vermeiden, und ich möchte, dass der Seitentext auf meinem Smartphone im Quer- oder Hochformat dieselbe Größe hat.

UPDATE: Bilder

Meine Problemseite:

Vereinfachte Version:

Vereinfachte Version bei 200 px Browserbreite:

Die Eingabe-HTML-Tags und ihre entsprechenden .input-* Stile legen nur die CSS fest width. Dies ist beabsichtigt.

Aber ein CSS hinzufügen max-width:100% wird sicherstellen, dass zu große Eingaben unter Kontrolle gehalten werden.
z. B. fügen Sie dies zu Ihrem Kopf hinzu:

<style>
    input {
        max-width: 100%;
    } 
</style>

Normalerweise nehme ich lieber einen anderen class="row-fluid" und class="span12" in Elementen mit class="spanX" um 100% Breite eines Elements zu erhalten. Das wird keine Fehler bei unterschiedlichen Auflösungen verursachen. Also habe ich noch eine hinzugefügt row-fluid Klasse in deinem Element mit span4 Klasse, und darin neu row-fluid div mit hinzugefügt span12. Sie müssen manchmal die standardmäßigen Bootstrap-Einstellungen überschreiben, um das zu bekommen, was Sie brauchen, also habe ich auch Klasse hinzugefügt .my-input Innerhalb <input /> Element, um 100 % Breite zu erhalten, und entfernen Sie die linke und rechte Polsterung (die Polsterung verursacht einen Fehler auf der rechten Seite). Und hier ist 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>

und CSS-Klasse zum Überschreiben

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

Sie können sehen und Jsfiddle-Demoversuchen Sie, die Bildschirmgröße zu ändern.

​

Ich bin gerade auf dieses Problem gestoßen und beim Überprüfen der Bootstrap-Dokumentation auf Formulareingaben heißt es: “Verwenden Sie relative Größenklassen wie .input-large oder passen Sie Ihre Eingaben mithilfe von .span * -Klassen an die Spaltengrößen des Rasters an.”

Meine Bootstrap-Zeile war für den Inhalt auf span9 und für die Seitenleiste auf span3 eingestellt. Einstellung <input class="span3"/> hat das Problem für mich gelöst, die Eingabefelder bleiben in der Seitenleiste, wenn die Bildschirmgröße reduziert wird.

Nur ein bisschen Input, nachdem ich mit diesen FOREVER gespielt habe (scheint es). Ich verwende ein einfaches width-Attribut und setze es je nach Container, Padding und anderen CSS-Faktoren auf zwischen 85 % und 95 %, um zu verhindern, dass sich die Eingabefelder tatsächlich bis zum Rand des Containers erstrecken.

.input-example {
   width: 90%; 
}

ICH BIN KEIN EXPERTE DARIN! Ich biete nur an, was ich gelernt habe, und bitte verstehen Sie dies nicht als Rat eines erfahrenen Entwicklers. Der Versuch, einer Gemeinschaft, die mir unzählige Male das Leben gerettet hat, etwas zurückzugeben.

Das Problem ist leider heimtückischer als all dies richtig zu machen. Die Verwendung von max-widths hat bei mir nichts gebracht. Und ich hasse es, wenn Dinge beschissen aussehen, also habe ich mich ein wenig damit beschäftigt …

Es läuft auf diese drei Zeilen in der CSS-Deklaration eines Formularsteuerelements hinaus:

width: 100%;
padding: 6px 12px;
border: 1px solid #cccccc;

Wenn die Breite eines Eingabeelements vom Typ Text festgelegt wird, werden die horizontale Füllung und der Rahmen zu 100 % hinzugefügt, anstatt davon genommen zu werden. Wenn also die 100 %-Breite w 500 Pixel beträgt, dann wird die Breite des Texteingabeformular-Steuerelements zu w+12+12+1+1, 526 Pixel. Die zusätzlichen 26 Pixel sind eine Konstante, was bedeutet, dass die Dinge niemals gleichmäßig werden, wenn der Breitenprozentsatz nicht dynamisch entweder als 100% * (w/(w+26px)) oder 100%-26px berechnet wird.

Ich persönlich glaube, dass dies entweder ein Fehler in der Definition oder der Implementierung der HTML/CSS-Schnittstelle ist (ich weiß nicht welcher, ich möchte wirklich nicht versuchen, die Referenzen im Treibsand der Standards zu finden). Angenommen, ein Eingabefeld hat eine Breite von 100 %, dann muss die Korrektur angewendet werden, damit die Breite innerhalb der Ränder 100 % beträgt, nicht 100 % ohne die horizontale Polsterung und die Rahmenbreite.

Übrigens, Prozentwert oder feste Größe spielen keine Rolle; Sie sind auch um 26 Pixel versetzt. Sie müssen diese 26 Pixel aus der Breite herausfiltern.

Für Bootstrap-Texteingaben ist jedoch nicht alles verloren, zumindest wenn Sie einen CSS-Compiler verwenden, der clientseitige Berechnungen zulässt. In weniger zum Beispiel

input.form-control[type=text] {
  width: calc(~'100%-26px');
}

wird alles besser machen. Beachten Sie, dass E-Mail- und Passworttypen (mindestens) auch das gleiche Problem haben.

26px ist natürlich etwas spröde, aber die Konstanten sind in der Form-Control-Deklaration fest codiert, also sind Ihnen die Hände gebunden. Ein Test wäre schön, der die Größen der Steuerelemente beim Rendern überprüft, um Änderungen der CSS-Deklaration bei Bootstrap-Upgrades zu erkennen, aber nicht heute Abend, danke.

Wie von Pavlo in dieser Antwort angegeben: Twitter Bootstrap: Stoppen Sie das Eingabefeld, das sich weit über das hinaus erstreckt

Verwendung der Klasse input-block-levelanstelle von input-xlarge (oder anderen Größen) löst das Problem ebenfalls.

Ich bin auf dieses Problem mit Formulareingaben und Panel-Body gestoßen. Ich habe es in folgendem Punkt beantwortet: Twitter Bootstrap: Stoppen Sie das Eingabefeld, das sich weit über das hinaus erstreckt

Das Problem für mich war, dass das Formular überfüllt war. Dadurch konnten die Eingaben nachziehen. Durch Festlegen der maximalen Breite des Formulars (max. Breite: 100 %) konnte ich Eingaben sowie alle anderen Inhalte, die in das Formular eingefügt werden können, korrigieren.