Bootstrap 3: Wie sollen Formulargruppen innerhalb von Spalten verwendet werden? ⇐ CSS

[Anonymous]

Ich verwende Bootstrap 3 und habe ein ziemlich standardmäßiges Seitenlayout: eine breite Spalte auf der linken Seite (

Code: Select all

.col-md-8

), der einfachen Text enthält, und eine schmalere Spalte auf der rechten Seite (

Code: Select all

.col-md-4

), das ein Formular enthält.

Jedes der Formularfelder ist wiederum in eine .form-group eingeschlossen.

Bei meinem ersten Versuch erstreckten sich die .form-groups über den linken und rechten Rand der enthaltenden Spalte. (Stellen Sie sicher, dass der JSFiddle-Vorschaurahmen mindestens so breit ist wie der SM-Haltepunkt von Bootstrap.) Ich habe ein rosa Hintergrund-Div hinzugefügt, um das Feld anzuzeigen, in dem die .form-groups bleiben bleiben sollten.

Bei meinem zweiten Versuch habe ich einen .container innerhalb des .col-md-4 hinzugefügt und dann jede .form-group in einen eingeschlossen .row und ein .col-md-4.

Das reicht aus, aber... ist das der richtige und bevorzugte Weg? Es scheint eine Menge zusätzlicher Standard-Markups zu sein, um etwas zu erreichen, das eigentlich ganz natürlich passieren sollte.

Die Bootstrap-Dokumente sind ziemlich gut, aber sie beschönigen einige der „großen Zusammenhänge“ wie diese. Vielleicht ist das für Leute, die bereits Erfahrung mit responsivem CSS haben, offensichtlich, aber für einen Anfänger wie mich kann es ziemlich verwirrend sein.

Hier ist der Code von meinem ersten Versuch:

Code: Select all

 - jsFiddle demo








Broken version
Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.






This column will be filled with text.  Lorem ipsum dolor sit amet...

 






Name


Email


Submit



 

 

 

 

Und hier ist der Code von meinem zweiten, möglicherweise korrigierten Versuch:

Code: Select all

 - jsFiddle demo








Corrected (?) version
Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.






This column will be filled with text. Lorem ipsum dolor sit amet...

 









Name





Email




Submit