Bootstrap 3 Formular mit Eingabe-Gruppe-Addon Wrapping Fehlerbezeichnungen mit Jquery Validate

Question

Verwenden von Bootstrap 3 mit einem Formular horizontal mit Form-Gruppe und Eingabe-Gruppe Tags mit Jquery-Validate. Wenn Jquery.Validate für Fehler ausgeführt wird, hängt es ein Label-Fehler-Steuerelement innerhalb der Eingabegruppe an.

Das Problem ist, dass Eingabegruppe-Addon in die nächste Zeile unterhalb des Formularfelds umbrochen wird, wenn das Label-Fehler-Steuerelement von Jquery Validate hinzugefügt wird.

VIEW: http://www.bootply.com/114554

Wie bekomme ich das Etikett Fehler in der Form Kontrolle zu bleiben und nicht wickeln Sie die Eingabe-group-Add-on in der nächsten Zeile?

Ja, ich bin diese Lösung bewusst - hervorragend, aber immer noch nicht die Fehler-Label für form horizontal sie in eine Reihe aufstellen: Bootstrap 3 with jQuery Validation Plugin

Answer 1

Der einfachste Weg, um Ihr Problem Ihren Fehler sein soll, lösen setzen Label mit absoluter Positionseigenschaft in CSS. In Ihrem Beispiel hier ist das Ergebnis:

.text-danger { 
    color: #a94442; 
    position: absolute; 
    width: 100%; 
    line-height: 34px; 
    margin-left: 8px; 
} 

Answer 2

es eine andere Art und Weise gelöst: http://www.bootply.com/2liEuyqrAb

Haben das Etikett außerhalb der Eingangs-Gruppe zu bewegen. Sobald dies der Fall war, trat das erwartete Verhalten auf: Formularbezeichnung nach links, Feld nach rechts und Fehler unter Feld.

Answer 3

Ich gebe eine Lösung für diese Frage für einen anderen Benutzer, es ist das gleiche Problem.

Sie können es hier finden. Bootstrap-3: Input Group-Addon STRETCHES with jQuery Validation messages.