Wenn eine neue Seite angelegt wird, werden folgende Felder vorbelegt:
TCAdefaults.pages.backend_layout = pagets__OneCol
TCAdefaults.pages.tx_t3sbootstrap_container = container
TCAdefaults.pages.tx_t3sbootstrap_smallColumns = 3Somit wird eine Seite mit einem Backend Layout “1 Column” und einem .container für die gesamte Seite erstellt.
Der .container ist das Herzstück des Bootstrap Grid Systems.
Die korrekte Umsetzung dieser Container-Logik ist entscheidend, damit das Layout nicht "zerschießt", wenn Redakteure Inhalte einpflegen.
Bootstrap verfügt über drei verschiedene Container:
.container, der eine maximale Breite für jeden responsiven Breakpoint festlegt..container-{breakpoint}, dessen Breite bis zum angegebenen Breakpoint 100 % beträgt..container-fluid, dessen Breite an allen Breakpoints 100 % beträgt.
Verschachtelung vermeiden
Container sollten in der Regel nicht verschachtelt werden.
Problem:
Wenn du einen .container in einen .container setzt, addieren sich die Paddings (Innenabstände), was das saubere Alignment des Grids bricht.
Lösung in TYPO3:
Wenn du ein Container oder Wrapper (z. B. 2-Spalter) erstellst, sollte dieses nur dann eine Container-Klasse erhalten, wenn das übergeordnete Backend-Layout (1 Column) keinen globalen Container hat.
T3S Bootstrap prüft, ob eine Verschachtelung gegeben ist und entfernt (i.d.R.) die Container Klasse.
Dieses wird im Backend angezeigt (in rot s. Screenshot).
Folgende Möglichkeiten sind gegeben:
Für die gesamte Seite (default)
Unter "Seite bearbeiten" -> "Erscheinungsbild" im Auswahlfeld "Container".
Wenn du z.B. einen “Wrapper” über die gesamte Bildschirmbreite erstellen möchtest (1 Column), dann solltest du hier keinen Container (no container) auswählen!
Der “Background-Wrapper”, “Parallax-Wrapper” oder ein Slider (Carousel oder Swiper) sind das entscheidende Werkzeug, um das starre Spaltenlayout aufzubrechen und moderne Full-Width-Sektionen mit zentriertem Inhalt zu erstellen.
Für jedes Content Element
In jedem Content Element und fast jedem Container kann unter "Erscheinungsbild" im Auswahlfeld "Container" eine Auswahl getroffen werden.
Sonderfall
Im “Background-Wrapper” und “Parallax-Wrapper” wir ein .container im Inneren für die “Child-Elemente” erstellt!
Dieses Auswahlfeld kann in der EM Konfiguration aktiviert/deaktiviert werden (default = aktiviert).
Für CE "Container"
Dieser kann auch als "flexbox container" oder individueller "div-container" (mit "Extra Class") genutzt werden.
Infos: