Ändern Sie das Bootstrap-Layout vom Inline-Formular zum Grid auf dem mobilen Gerät

8

Ich habe ein komplexes Webformular mit vielen Feldern in einer Zeile. Bootstrap-Inline-Form funktioniert auf großen Bildschirmen. Die Anforderung besteht jedoch darin, die Seite so anzupassen, dass das Inline-Formular auf kleineren Bildschirmen wie Tablets und Telefonen in ein dreispaltiges Rasterlayout umgewandelt wird.

Inline-Formular auf großem Bildschirm:

Erforderliches Layout auf dem mobilen Bildschirm

Ist es möglich? Dies ist für Bootstrap 3.

Irgendwelche Tipps werden sehr geschätzt!

Code-Snippet:

%Vor%

    
devXen 27.04.2016, 14:22
quelle

3 Antworten

3

Ich habe einen Teil Ihres HTML-Markups geändert, einige Inline-Stile entfernt und einige Klassen hinzugefügt.

Hier ist was du suchst:

%Vor% %Vor%
    
Ricky 20.05.2016, 18:10
quelle
1

Versuchen Sie es. mit col-md-push- * und col-md-pull- *

aktualisiert JSFIDDLE

verwendet hier die Klasse form-inline vor form-group class und style

%Vor% %Vor%
    
Ram_UI 17.05.2016 03:19
quelle
1

%Vor%
    
Peter Darmis 21.05.2016 09:56
quelle