Bootstrap 4 - Grid's

k3nguruh

Erfahrenes Mitglied
Hallo,

ich versuche mich gerade (eigentlich schon seit Stunden / Tagen) an Bootstrap um das angehängte Aussehen zu realisieren. Es sollen je nach Bildschirmbreite die Form-Elemente anders angeordnet werden. Vll ist das auch gar nicht möglich. Ich würde mich über Infos und vor allem einen Code-Schnipsel sehr freuen.
 

Anhänge

  • formular.png
    formular.png
    10,5 KB · Aufrufe: 8

Naja, weil ich das für mich eigentlich als "einfach" ansehe ohne noch viel eigenes CSS zu "erfinden" und es verschiedene Sachen (Datepicker, etc) bereits angepasst gibt. Ich möchte jedenfalls erstmal mit Bootstrap arbeiten.

Könntest du mir vll einen Code (mit meinem Problem) geben der von deiner verlinkten Seite kommt. Ggf. kann ich dann ja Rückschlüsse für Bootsrap ziehen.
 
weil ich das für mich eigentlich als "einfach" ansehe
Ganz so einfach scheint es dann doch nicht zu sein:
ich versuche mich gerade (eigentlich schon seit Stunden / Tagen)

Es stimmt schon, dass es nützliche Sachen bei Bootstrap gibt wie Datepicker und Modal aber diese Gridsachen haben sich eigentlich überlebt dadurch, dass es jetzt Gridlayout gibt.

Damit kann man die Anordnung quasi WYSIWYG definieren. Würde für deinen Fall etwa so aussehen:
CSS:
        body {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-areas: "label-1"
                "input-1"
                "label-2"
                "input-2"
                "button";
        }

        @media (min-width: 30em) {
            body {
                grid-template-columns: repeat(2, 1fr);
                grid-template-areas: "label-2 input-1"
                    "label-2 input-2"
                    "null button";
            }
        }

        @media (min-width: 50em) {
            body {
                grid-template-columns: repeat(3, 1fr);
                grid-template-areas: "label-1 label-2 null"
                    "input-1 input-2 button";
            }
        }
 
HI.
Dein Vorhaben ist mit Flexbox nicht ganz unmöglich aber doch recht aufwändig.
Da Flexbox immer in eine Richtung orientiert ist und Du mächtest die Reihenfolge von Elementen ändern.
Das würde über das Flexbox-Attribut order gehen, aber Du willst auch Elemente umbrechen und dafür gibts in flexbox nichts.
Ich müsste jetzt auch erstmal rumprobieren um das hinzubekommen.

Solange es nicht um eine Kunden Webseite geht, würd ich auf CSS-Grid setzen. Da kannste den IE11 getrost ignorieren.

Hier ist auch noch ein netter Text:
https://blog.theodo.com/2018/03/stop-using-bootstrap-layout-thanks-to-css-grid/

Ich nutze von Bootstrap auch inzwischen nur noch manchmal Komponenten oder wenns mal schnell gehen muss.
Aber ich hab gemerkt das mir grad das Grid inzwischen mehr arbeit macht als wenn ichs schnell selbst schreibe.

Grüße
 
Zuletzt bearbeitet:
Hallo,
erstmal Danke für eure Antworten... mmhh, dann werd ich mich wohl erstmal hinsetzen müssen, um das CSS-Grid zu verstehen.

Muss ich erstmal selber probieren mit welchem "System" ich das am besten gebastelt bekomme. Falls aber doch noch einer was für Bootstrap kennen sollte, lasst mich bitte nicht dumm sterben ;-)
 
Zurück