Wie zentriere ich ein Formular mithilfe von BootStrap horizontal?

7

Hallo, ich versuche, ein Login-Formular in der Mitte des Bildschirms mit BootStrap 2 zu positionieren. Ich habe verschiedene Kombinationen aus Offset usw. versucht. Aber ich habe nicht viel Glück.

%Vor%

Irgendwelche Vorschläge, wie ich das erreichen kann?

    
Marco 28.02.2012, 11:55
quelle

5 Antworten

14

Wenn Sie das Rastersystem verwenden möchten, folgen Sie @ Pickles Antwort. Dadurch werden die übergreifenden Spalten zentriert, die Ihr Formular enthalten. Wenn du möchtest, dass das Formular in diesem Bereich zentriert wird, musst du etwas mehr arbeiten, wie die Dinge, die @kajo in seinem Kommentar zu deiner Frage erwähnt.

Um auf die Antwort von @ Pickle näher einzugehen, hier ein Beispielcode, der einen Bereich von 4 Spalten im Standardraster mit 12 Spalten zentriert. Wenn Sie eine andere Anzahl von überspannten Spalten benötigen, verwenden Sie die Formel von @ Pickle (bedenken Sie jedoch, dass Ihre Anzahl überspannter Spalten eine gerade Zahl sein muss)

%Vor%     
csturtz 01.03.2012 20:58
quelle
5

Normalerweise sind alle Spannen nach links floated. Sie müssen es also auf keine setzen und dann den Rand auf auto stellen.

In etwa so:

%Vor%     
PersianMan 06.04.2013 15:21
quelle
3

Setzen Sie die Klassen einfach auf 2 * offsetClass + span class = 12 Spalten.

dh: .offset4.span4

    
Pickle 28.02.2012 22:25
quelle
0

Leider funktioniert die Offset-Klasse im Row-Fluid-Element derzeit nicht korrekt.

Ссылка

Wenn Sie das row-fluid-Element verwenden möchten, können Sie einen span4 mit einem br-Tag davor einfügen, bevor Sie den Inhalt div.

eingeben     
Gabe K 11.05.2012 16:12
quelle
0

Nachdem ich so viel mit diesem Center-Problem zu kämpfen hatte, schaffte ich es, meine eigenen Tweeks zu erstellen

CSS:

%Vor%

HTML:

%Vor%

Jetzt ist es endlich für immer zentriert, auch wenn die Größe des Browsers geändert wird (Chrome und Firefox)

    
Junior M 29.11.2012 17:32
quelle

Tags und Links