Spaltendefinition richtig anwenden

[karo68]

Hallo,

ich benutze Contao 4.4 und BS für Contao 2. Ich habe mir ein Spaltenset angelegt mit 4 Spalten und möchte dieses nun in einem Artikel anwenden. Leider bekomme ich es nicht hin, dass die Spalten in einer Zeile richtig aufgeteilt werden, da mir bei jedem Grid-Start eine "row" angelegt wird. Wie bekomme ich es hin, dass die Spalten nur "col" bekommen und das äußerste Element "row"? Was mache ich falsch? Screenshots anbei.

Viele Grüße
Karsten

frontend.jpeg
spaltendefinition.jpeg
spalten_anwenden.jpeg

[PaddySD]

Da musst Du nochmal genauer in die Doku von bootstrap schauen...

Bei Deinen Definitionen fehlt so einiges:
Insgesamt hast Du immer 12 Spalten. Wie Du diese aufteilst, bestimmst Du in den Definitionen. Auf Deinen Fall bezogen, müsstest Du also:

XS - 12 Spalten = 1 sichtbare Spalte, 12/12
S - 4-4-4 Spalten = 3 sichtbare Spalten 4/12 = 1/3

Mal angenommen, Du möchtest das bei grösseren noch erweitern:
L - 3-3-3-3 Spalten = 4 sichtbare Spalten 3/12 = 1/4

Du musst also noch Zeilen anfügen bei S, M, L usw und dort die Aufteilung einstellen. Du könntest ja auch z.B. so etwas wollen:

L - 3-6-3 Spalten = ebenfalls drei sichtbare Spalten, wobei mittig eine breite Spalte wäre...

[karo68]

Du musst also noch Zeilen anfügen bei S, M, L usw und dort die Aufteilung einstellen. Du könntest ja auch z.B. so etwas wollen:

L - 3-6-3 Spalten = ebenfalls drei sichtbare Spalten, wobei mittig eine breite Spalte wäre...

Danke! das macht natürlich Sinn :-)

Ich habe es entsprechend definiert, s. Anhang. Meine Spalten werden dennoch mit "row" versehen. So stelle ich mir das vor:

Zeile_Anfang
Spalte_1_Anfang
Element_1
Element_2
Spalte_1_Ende
Spalte_2_Anfang
....
Spalte_2_Ende
Zeile_Ende

Ich kann aber nirgends finden, wo ich definieren kann, dass es sich um eine Spalte handeln soll. Grid-Start und Grid-Stop macht da keinen Unterschied. Was mache ich falsch?
Spaltendefinition_neu.jpeg
frontend_2.jpeg

[webstar]

Grid-Start definiert eine neue Row. Du solltest nur ganz am Anfang eine anlegen. Zwischen den Spalten gibt es das Grid-Trennelement. Dies kann händisch angelegt werden oder über einen Wizard im Startelement.

In Version 2 der Grid-Komponente musst du nicht jede Spalte händisch auffüllen. Es wird immer über die definierten Spalten iteriert. Hat man also nur gleichgroße Spalten, reicht das Anlegen von einer Spalte in der Griddefinition.

[PaddySD]

Nein, nein, Deine Spalten werden schon richtigerweise als "row" versehen. Richtigerweise deshalb, weil Du das brauchst, damit bootstrap funktioniert. Du solltest wirklich nochmal die entsprechende Doku, zumindest anlesen. Gerade das Thema "row" und warum es wichtig für den Aufbau ist, findest Du hier : Klick hier.

Warum Dir das nochmal sage? Nur wenn Du den Aufbau von bootstrap verstehst, verstehst Du auch, wie die Definitionen angelegt werden müssen, bzw welche Artikel (CE) wohin müssen. Oder sagen wir mal so, Du tust Dich deutlich leichter, wenn Du bei bootstrap selbst etwas mehr Verständnis hast.

Du hast jetzt die Spaltendefinitionen soweit korrekt angelegt, jetzt muss das natürlich noch mit den Grid-Elementen in den Artikeln übereinstimmen. Ich vermute da den Fehler.

Ich hab das mal versucht in einer Kunden-Installation kurz nachzubauen (danke Ferdinand, ich hoffe, Du bist mir nicht böse ), die Bilder hänge ich an.

Das GridStart entspricht dabei dem Beginn einer "row", die Du brauchst, damit Du Spalten anlegen kannst. Innerhalb dieser Spalten kannst Du dann Inhaltselemnte platzieren, wie zB Bilder, Text usw. Ohne "row" keine "columns". Grid-Ende ist dann analog das Ende von "row".

Da bootstrap aber noch so einige Feinheiten bietet, wie zB Einrückung der Spalten, Versatz und und und, sei Dir wirklich nochmal die Doku von bootstrap ans Herz gelegt. Da finden sich sehr spannende Beispiele, was man da alles Tolles machen kann.

Schönes Wochenende!

EDIT: zu lange gebraucht

[karo68]

Grid-Start definiert eine neue Row. Du solltest nur ganz am Anfang eine anlegen. Zwischen den Spalten gibt es das Grid-Trennelement. Dies kann händisch angelegt werden oder über einen Wizard im Startelement.

In Version 2 der Grid-Komponente musst du nicht jede Spalte händisch auffüllen. Es wird immer über die definierten Spalten iteriert. Hat man also nur gleichgroße Spalten, reicht das Anlegen von einer Spalte in der Griddefinition.

super, habe ich verstanden. So klappt es, danke! Da war ich war von den von mir vorher benutzten Grid-Systemen etwas eingefahren :-)

Gruß
Karsten