Frage zu Bootstrap Rastersystem auf productmain.tpl

Ist jetzt richtige Anfänger Frage aber habe folgendes Problem (Oxid v6, Theme: wave)
Würde gerne auf der Produktdetailseite die linke Spalte (Produktbild) auf Desktopansicht breiter machen, dafür darf die mittlere Spalte schmäler sein:

Linke Spalte: col-12 col-md-4 details-col-left

Mittlere Spalte: col-12 col-sm-8 col-md-5 col-lg-6 details-col-middle

Rechte Spalte: col-12 col-sm-4 col-md-3 col-lg-2 details-col-right

Sobald ich aber den col-md Wert der linken Spalte um einen Wert erhöhe und die mittlere Spalte um eins reduziere, bricht die rechte Spalte um?

Ich denke, du musst eher mit den col-lg- Klassen arbeiten. MD ist bis 991px Breite

Tipp beschäftige Dich mit Bootstrap Grid System. Wenn das verstanden hast weißt auch warum die mittlere Spalte umbricht.

Das Wave Theme verwendet Version 4.3.1 von Bootstrap steht im styles.css Kopf und dies wäre die passende Doku Stelle https://getbootstrap.com/docs/4.3/layout/grid/

Zur Erklärung von dem Verhalten. Eine Zeile gekennzeichnet mit der CSS Klasse row bei Bootstrap hat immer 12 Spalten gekennzeichnet mit col-xx-1 bis col-xx-12. Heißt wenn Du der mittleren Spalte eine col-md-6 verpasst und die anderen Spalten haben eine 4 und 3 kommst im Ergebnis auf 13. Dies überschreitet die max. Spaltenanzahl einer Zeile deswegen bricht Dir die mittlere Spalte um.

Lösung wäre jetzt, wenn Du einer Spalte eine höhere Nummer verpasst muss diese Anzahl einer anderen Spalte wegenommen werden um ein Umbruch zu verhindern.

Update: Hatte überlesen, dass bereits um eins reduziert hast.

Kann mich dann nur der vorherigen Antwort anschließen für Desktop müsstest dann wahrscheinlich lg anpassen.

Dein Problem hier ist wahrscheinlich die Vererbung für die linke Spalte weil col-md-4 gilt für alles Viewports ≥768px das heißt auch für lg also größer als 991px Breite. Das bedeutet Du reduzierst an der falschen Stelle.

Wenn Du linke Spalte col-md-5 und müsstest du rechte Spalte col-lg-1 aber damit würdest Dir den anderen Viewport von md “kaputt” machen.

Daher wäre besser:

Linke Spalte: col-12 col-md-4 col-lg-5 details-col-left

Mittlere Spalte: col-12 col-sm-8 col-md-5 col-lg-6 details-col-middle

Rechte Spalte: col-12 col-sm-4 col-md-3 col-lg-1 details-col-right

1 Like

Super vielen Dank für die ausführliche Erklärung! Hat geklappt :+1:

1 Like