Wie passe ich responsive Spalten und Eingabefelder in Twitter Bootstrap an?

Die Hauptfrage ist, wie man das Bootstrap-Responsive-CSS anpasst. Mein Code funktioniert teilweise, aber ich kann diese Fälle nicht beheben. Es ist schwer zu erklären, weshalb ich zum besseren Verständnis Visualisierungen auf Screenshots erstellt habe.

Ich habe den tatsächlich bereinigten Vorlagencode am gepostetJSFIDDLE.

Wenn die Breite größer als 1200px ist, sind die Spalten in Ordnung. Das bedeutet, dass sie zwei span6 nebeneinander sind: Zwischen 1200px und 980px sollte die Anzeige so aussehen: Weniger als 979px und mehr als 768px beim ersten Zusammenbruch der Navigationsleiste Ich hätte gerne so etwas in der Mitte des Containers: Bis zum nächsten Schrumpfen unter 768px springt die rechte Spalte in eine neue Zeile und bleibt dort, wenn sie weiter auf 480px und darunter reduziert wird. Ich denke, dass die unten dargestellte Ansicht für Mobilgeräte in Ordnung ist und in Browsern mit schmalen Desktops besser aussieht, mit der Ausnahme, dass beim Skalieren beide Spalten nicht in der Mitte liegen:

Die kleinste Breite entspricht meinen Erwartungen.

Antworten auf die Frage(1)

Ihre Antwort auf die Frage